javascript - 即使新值等于先前值，如何在每个 setMyState() 处触发 useEffect() Hook ？

Question

我正在尝试实现一个逻辑，每次组件使用 setMyState(value) 时我都需要执行一个操作(我将状态的先前值记为 preValue) 使用 useEffect() Hook ，将 myState 作为依赖。

这在 value !== prevValue 时按我的意愿工作。但是，如果 value === prevValue，则不会触发 Hook ，这在优化方面是合乎逻辑的。但是在每次 setMyState(value) 调用时仍然触发 Hook 的正确方法是什么？这可能是一个设计缺陷，因为我是 React 的新手。

提前谢谢你。

Answer 1

useEffect 仅在新值与先前值不同时触发。 但是您可以使用此 hack 在每次值更改时触发 useEffect。

const [state, setState] = useState({ name: "" });

useEffect(() => {
  console.log("called... " + state.name);
}, [state]);

const onValueChange = (e) => {
  setState({ name: e.target.value });
};

return (
  <div className="App">
    <h1>Car</h1>
    <select name="cars" id="cars" onClick={onValueChange}>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
  </div>);

sandbox