Question

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

  <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的队列中排队。但是我们不能再这样做了，因为挂钩不接受回调。

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

[isOnline, toggleIsOnline] = useState(false);

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

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

Answer 2

尝试一下。使用----------> use ^ to go through the parents of the merge | | *-----. 6af2936d | |\ \ \ \ | | | | | * 20d6fb23 BRANCH1 | | | | * | e589d446 BRANCH2 | | | | * | ec6088bd | | | | |/ | | | * | 38dcecfa BRANCH3 | | | |/ | | * | 698c3daa BRANCH4 | | |/ | |/ | * 2d97958e | |\ | | * 8989f1d3 | | * d907cb7a | |/ | * af368002 V use ~ to go this way (through the ancestors)的功能形式，您可以“欺骗” React，使其认为您的新状态取决于您的上一个状态，因此它会立即进行更新。这在很多方面帮助了我。看看是否也对您有帮助。

setState()

功能更新

如果新状态是使用先前的状态计算的   状态，您可以将函数传递给setState。该函数将接收   先前的值，并返回更新的值。这是一个例子   使用两种形式的setState的计数器组件：

Source: Hooks API

Hooks setState总是落后一步

2 个答案: