reactjs - 钩子(Hook) setState 总是落后一步

Question

我使用了 useState 钩子(Hook)。每次下拉按钮的值更改时都应该触发设置状态方法(在 Hook 中)，但设置状态总是落后一步。我 ve seen solutions with the traditional setState methods of class based components, but how do i fix this using hooks使用状态？

  <Dropdown
    placeholder='Select College'
    search
    fluid
    selection
    options={collegeSelection}
    onChange={selectCollegeHandler}
  />

method:
   const selectedCollegeHandler = (event, data) => {
     setSelectedCollege(data.value);
   }
State:
   const[selectedCollegeState, setSelectedCollege] = useState(' ');

Answer 1

为了完成，值得一提的是useEffect旨在帮助实现这种异步性。事实上，根据 Hooks 文档，the hooks solution is to use the Effect Hook , (本质上是用 useState 实现回调)。

const CollegeForm = () => {
const [college, setCollege] = useState(null)

useEffect(() => {
    console.log(college); // add whatever functions use new `college` value here.
}, [college]);

return (
<form onChange={e => setCollege(e.target.value)} />
    )
};

当(且仅当)鲍勃在您的表格中选择一所新大学时，会调用此(侧面)效果。无论逻辑是基于他对college 的每一个优柔寡断的推诿。选择可以进入这个 useEffect 回调。 (您也可以在没有依赖数组 [college] 的情况下使用 Effect，每次状态更改时都会导致这些(副作用)。

相对于基于类的组件进行解释:使用“传统” setState 方法，我们可以将回调作为第二个参数添加到 setState所以立即使用新状态:

this.setState({ college: data.value }, () => console.log(new value));

回调防止它在 React 文档称为 pending state transition 的地方排队。 .但是我们不能再这样做了，因为钩子(Hook)不接受回调。

正如 cbdeveloper 所说，有时将函数传递给 setState 是合适的，例如:

[isOnline, toggleIsOnline] = useState(false);

<Button onClick={() => toggleIsOnline(prevState => !prevState)} /> 

但这并不总是合适的，尤其是如果您实际上并未使用 prevState .