如何正确使用React`useCallback`的依赖项列表？

Question

我有一个这样的例子：

codesandebox

我想在回调中修改状态值，然后使用新的状态值修改另一个状态。

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("0");
  const [added, setAdded] = useState(false);

  const aNotWorkingHandler = useCallback(
    e => {
      console.log("clicked");
      setCount(a => ++a);
      setText(count.toString());
    },
    [count, setCount, setText]
  );

  const btnRef = useRef(null);
  useEffect(() => {
    if (!added && btnRef.current) {
      btnRef.current.addEventListener("click", aNotWorkingHandler);
      setAdded(true);
    }
  }, [added, aNotWorkingHandler]);

return <button ref={btnRef}> + 1 </button>

但是，在调用此处理程序之后，成功增加了count，但没有成功。

你们能帮我了解为什么会这样吗？以及如何干净地避免它？

谢谢！

Answer 1

如果text和count始终处于同步状态，仅一个是数字而一个是字符串，那么我认为拥有两个状态变量是错误的。相反，只有一个，然后从中推导另一个值：

state

在上面的useCallback中，我有一个空的依赖项数组。这是因为回调中唯一使用的是setCount。 React保证状态设置器具有稳定的引用，因此setCount不可能更改，因此无需将其列为依赖项。