Hooks setState 总是落后一步

Question

我使用了 useState 钩子。应该在每次下拉按钮的值更改时触发设置状态方法（在钩子中），但设置状态总是落后一步。我使用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 文档，钩子解决方案是使用 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 回调。（你也可以使用没有依赖数组的 Effect [college]，它会在每次状态改变时产生这些（副作用）。

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

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

回调可以防止它在 React 文档中所谓的挂起状态转换中排队。但是我们不能再这样做了，因为钩子不接受回调。

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

[isOnline, toggleIsOnline] = useState(false);

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

但这并不总是合适的，特别是如果您实际上没有使用prevState. 

Answer 2

尝试这个。使用您的函数形式setState()可以“欺骗”React，使其认为您的新状态取决于您的最后状态，因此它会立即进行更新。这在很多情况下都对我有帮助。看看这是否也对您有帮助。

\n\n

method:\n  const selectedCollegeHandler = (event, data) => {\n    setSelectedCollege((prevState) => {\n      return data.value\n    });\n  }\n

\n\n

\n

功能更新

\n\n

如果新状态是使用先前状态计算的，则可以将函数传递给 setState。该函数将接收先前的值，并返回更新后的值。这里\xe2\x80\x99是使用两种形式的setState的计数器组件的示例：

\n

\n\n

来源：Hooks API

\n