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

Question

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

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

我创建了一个 setter 来更新状态值：

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

我很确定那是错误的（我的 linter 说它是...）- 那么应该怎么写？

注意这是 Preact，不是 React，所以语法可能有点不同。

Answer 1

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

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

Updating an object in state in a FunctionalComponent in Preact

javascript

reactjs

preact