即使新值等于以前的值，如何在每个 setMyState() 处触发 useEffect() 挂钩？

Question

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

这按我想要的方式工作value !== prevValue。但是，如果value === prevValue，则挂钩不会触发，这在优化方面是合乎逻辑的。但是在每次调用时仍触发挂钩的正确方法是什么setMyState(value)？这可能是一个设计缺陷，因为我对 React 还很陌生。

先感谢您。

Answer 1

useEffect当新值与先前值不同时唯一触发。但是您可以使用此技巧来触发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>);

沙箱