Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/file/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在没有回调函数的情况下使用react钩子状态变量?_Javascript_Reactjs_React Hooks - Fatal编程技术网

Javascript 如何在没有回调函数的情况下使用react钩子状态变量?

Javascript 如何在没有回调函数的情况下使用react钩子状态变量?,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,当我的复选框被选中或取消选中时,需要设置特定的数据。现在我正在状态变量中将checked的值设置为true或false。问题是它没有像setState那样的回调函数,当我在onChange函数中更新它时,它没有及时更新以使下一组数据正确更新。设置newEnhanceableData的属性取决于复选框是否选中。如何及时更新选中的属性,以便下一行newEnhanceableData更新其属性 以下是状态变量: const [checkbox, setCheckbox] = useState({che

当我的复选框被选中或取消选中时,需要设置特定的数据。现在我正在状态变量中将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);
  }} /> 
{
setCheckbox({checked:!checkbox.checked});
const newEnhanceableData=enhanceableData;
newEnhanceableData.properties.changeType=checkbox.checked?'Add':'Remove';
newEnhanceableData.properties.autopopulated=false;
setEnhanceableData(newEnhanceableData)
console.log('复选框:',复选框)
log('enhanceableData:',enhanceableData)
sendEnhancedTrackEvent(enhanceableData);
}} /> 
如您所见,已设置enhanceableData后,checked属性将更新:


您可能根本不需要挂钩,只需检查onChange函数中的checked状态:

<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>

{
const{checked}=ev.currentTarget;
console.log(选中)//切换为true和false
//其余的继续
}}
/>
点击我
如果要将逻辑移到其他地方,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)} />
const[checked,setChecked]=useState(true);
useffect(()=>{
//在这里做增强型计算
},[复选框]//

简单的事情:)