如何在没有回调函数的情况下使用 React Hook 状态变量？

Question

当我的复选框被选中或未选中时，需要设置特定数据。现在我在状态变量中将 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);
  }} />

正如您在此处看到的，选中的属性在已设置 enhancedData 后得到更新：

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)} />

如何在没有回调函数的情况下使用 React Hook 状态变量？

How to use react Hook state variables without a callback function?

javascript

reactjs

react-hooks