Javascript 使用React钩子验证新状态时修改上游状态

我尝试使用与此类似的React钩子：

function MyComponent({ setError }) {
  const [total, setTotal] = useState('');
  // ...
  useEffect(() => {
    setTotal(oldTotal => {
      const newTotal = oldTotal + inputValue;
      // some validation step
      if (newTotal.length % 2 !== 0) {
        setError(`${inputValue} was wrong`);
        return oldTotal;
      }

      return newTotal;
    });

  }, [inputValue, setError]); // I don't want this to re-evaluate when `total` changes.

  // ...
}

但是，

setError

会触发另一个

useState

回调，该回调会触发另一个重新渲染，并且React不喜欢在状态转换期间重新渲染

---

我应该如何构造这段代码，以便在应该调用时调用

setError

？

将一些控制台日志放在useEffect中，当全部更改时，它不会重新计算。调用setError不会影响此组件的内部状态@RichardMatsen I说，

setError

确实会更改上游状态并导致组件重新渲染。我原以为在状态转换期间，

setError

不允许调用会导致错误，但在我修改了您的代码沙盒，使其更能说明我的意思后，我似乎错了（因此，

setError

确实会改变上游状态）。因此，我认为我发布的代码没有问题，而我认为根据React的渲染规则，

setError

不能在那里调用。更清楚的是，由于原始帖子中未指定

setError

，“

setError

触发另一个

useState

回调”旨在澄清此组件的上下文，这并不是说我发布的代码就是这样的。我投票结束这个问题，因为我对这个问题的措辞太差了，甚至我都不知道问题出在哪里了。我以为这样做时会出现状态错误，但现在我需要弄清楚到底发生了什么