Блог

Когда мой флажок будет установлен или снят, необходимо установить определенные данные. Прямо сейчас я устанавливаю значение checked как 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);
  }} /> 
 

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

Возможно, вам вообще не понадобятся перехваты, и вы просто проверите проверенное состояние внутри вашей функции 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)} />