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

Question

我有一个这样的例子：

代码和盒子

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

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已成功增加，但text没有增加。

你们能帮我理解为什么会发生这种情况吗？以及如何干净地避免它？

谢谢你！

Answer 1

如果count和state总是应该保持同步，只有一个是数字，一个是字符串，那么我认为有两个状态变量是错误的。相反，只拥有一个，并从中导出另一个值：

const [count, setCount] = useState(0);
const text = "" + count;
const [added, setAdded] = useState(false);

const aNotWorkingHandler = useCallback(
  e => {
    setCount(a => ++a);
  },
  []
);

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