如何在沒有回調函數的情況下使用 react Hook 狀態變量？

Question

當我的復選框被選中或未選中時，需要設置特定數據。 現在我正在將狀態變量中的檢查值設置為真或假。 問題是它沒有像 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);
  }} /> 

正如您在此處看到的，在設置了 EnhanceableData 之后，checked 屬性會更新：

Answer 1

您可能根本不需要鈎子，只需檢查 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)} />