Reactjs 他总是落后一步

我用了useState钩子。应该在每次下拉按钮的值更改时触发设置状态方法（在挂钩中），但设置状态总是落后一步。我

已经看到了基于类的组件的传统setState方法的解决方案，但是如何使用hooks

useState解决这个问题呢

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

---

试试这个。使用

setState（）

的函数形式，您可以“欺骗”自己，让自己认为新状态取决于上一个状态，因此它会立即进行更新。这在很多地方对我都有帮助。看看这是否对你也有帮助

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

功能更新

如果新状态是使用上一个 状态，可以将函数传递给setState。该函数将接收 返回上一个值，然后返回更新后的值。下面是一个例子 使用两种设置状态形式的计数器组件：

---

对于完成，值得一提的是，

useffect

旨在帮助实现这种异步。事实上，根据Hooks文档（本质上是用useState实现回调）

回调阻止它在React文档所称的队列中排队。但是我们不能再这样做了，因为钩子不接受回调

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

[isOnline, toggleIsOnline] = useState(false);

toggleIsOnline（prevState=>！prevState）}/>

---

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

prevState

您所说的“设置状态总是落后一步”是什么意思

setSelectedCollege

是异步的，就像类组件中的

setState

一样，因此您不会立即获得更新的值。那么我如何修复它呢？一旦onChange触发，我需要得到一个更新的值。你能提供一个沙盒最小功能的例子吗？

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

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

[isOnline, toggleIsOnline] = useState(false);

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