在Preact中的FunctionalComponent中更新状态中的对象

如何解决在Preact中的FunctionalComponent中更新状态中的对象

在useEffect中，对后端app.js进行访存调用以获取一些数据，这些数据作为对象laStateObj返回。

useEffect(() => {
   fetchCall<{ laStateObj }>('/fetchData').then((data) => {
      const ddata = JSON.parse(data);
      setLaStateObj({
         email: ddata.email,approved: ddata.approved
      });
   });
},[]);

我创建了一个设置器来更新该状态值：

const [laStateObj,setLaStateObj] = setState({email: undefined,approved: undefined});

单选按钮值更改后，我希望切换布尔值approved的状态：

<CheckBox checked={laStateObj.approved} onChange={(prev.approved) => !prev.approved} />

那没有用，所以我添加了一个处理程序：

<CheckBox checked={laStateObj.approved} onChange={handleApproved} />

const handleApproved = () => {
   const prevApproved = laStateObj.approved;
   setLaStateObj = {...laStateObj,approved: !prevApproved};
};

我很确定这是错误的（我的短毛猫说这是...）-那么应该怎么写呢？

请注意，这是Preact，而不是React，因此语法可能有所不同。

解决方法

setLaStateObj是一个函数，并且是const，所以您不能做类似setLaStateObj = {...laStateObj,approved: !prevApproved};的事情。

如果您想切换批准状态，我相信应该是

setLaStateObj(state => ({
  ...state,approved: !state.approved
}))

在其中扩展先前的状态并更新approved属性。

const handleApproved = () => {
  setLaStateObj(state => ({
    ...state,approved: !state.approved
  }))
};

...

<Checkbox checked={laStateObj.approved} onChange={handleApproved} />