javascript - reactjs Hook 中连续状态对象设置的问题

Question

我开始使用 React 钩子(Hook)，我决定在 useState 函数中放置一个对象而不是变量:

const [foo, setFoo] = useState({
    term: '',
    loading: false,
    ...
});

但稍后我想更新它时

const onChange = (e) => { 

    const { value } = e.target;

    setFoo({ ...foo, term: value });

    if(value) setFoo({ ...foo, loading: true });

    ...

}

...

return (
   ...
   <input onChange={onChange} value={term} />
   ...
) 

1. 为什么在第二个 setFoo 中，当我检查 foo 对象时，我总是得到 term 属性到 '' 与初始值完全一样，并且输入不会用键入的字符更新？

- 当我删除第二个 setFoo 时，它起作用了，所以我猜是因为 setFoo 是异步的，但如何解决这个问题？。

- 我知道我们可以通过只调用一次 setFoo 来解决这个问题，但我想知道其他解决方案吗？

2. 为什么 redux 中从来没有出现过这种问题？

Answer 1

解决方案:像这样使用一个setFoo:

const onChange = (e) => { 

    const { value } = e.target;

    setFoo({ term: value, loading: !!value });

    ...

}

!! 表示“转换为 bool 值”。