Как использовать реагирующие переменные состояния Хука без функции обратного вызова? - PullRequest
Новая
       8

Как использовать реагирующие переменные состояния Хука без функции обратного вызова?

1 голос
/ 18 апреля 2019

Когда мой флажок отмечен или не отмечен, необходимо установить определенные данные.Прямо сейчас я устанавливаю значение флажка true или false в переменной состояния.Проблема в том, что у него нет функции обратного вызова, как у setState, поэтому, когда я обновляю ее в функции onChange, она не обновляется вовремя, чтобы следующий набор данных обновлялся должным образом.Установка свойств для newEnhanceableData зависит от того, установлен ли флажок или не установлен.Как своевременно обновить проверенное свойство, чтобы следующая строка newEnhanceableData обновляла его свойства?

Вот переменные состояния: 

const [checkbox, setCheckbox] = useState({checked: true});
const [enhanceableData, setEnhanceableData] = useState({
  name: 'Item Clicked',
  properties: {
    ...defaultProps,
    activityLocation: 'Member - RAQ Contact Details',
    autopopulated: true,
    changeType: 'Add'
  }
});

И вот где я обновляю их: 

<input 
  id='raq-sms-text-checkbox' 
  type='checkbox' 
  defaultChecked={true}
  style={{marginRight: 5}}
  onChange={() => {
    setCheckbox({checked: !checkbox.checked});

    const newEnhanceableData = enhanceableData;
    newEnhanceableData.properties.changeType = checkbox.checked ? 'Add' : 'Remove';
    newEnhanceableData.properties.autopopulated = false;
    setEnhanceableData(newEnhanceableData)

    console.log('checkbox: ', checkbox)
    console.log('enhanceableData: ', enhanceableData)

    sendEnhancedTrackEvent(enhanceableData);
  }} />

Как вы можете видеть здесь, проверяемое свойство обновляется после того, как extenableData уже установлен:

enter image description here

1 Ответ

1 голос
/ 18 апреля 2019

Вам могут вообще не понадобиться хуки, и просто проверьте проверенное состояние внутри вашей функции onChange: 

<label>
  <input
    type="checkbox"
    onChange={ev => {
      const { checked } = ev.currentTarget;
      console.log(checked) // toggles to true and false
      // continue with the rest
    }}
  />
  Click me
</label>

Если вы хотите переместить логику куда-то еще, полезно использовать useEffect: 

const [checked, setChecked] = useState(true);

useEffect(() => {
   // do-enhanced-computing-stuff-here
}, [checkbox]) // <-- effect only runs if checkbox boolean state changes 

<input checked={checked} onChange={ev => setChecked(ev.currentTarget.checked)} />
...