外部组件回调时useState的data值为null问题排查

这是典型的React闭包陷阱导致的旧状态捕获问题，具体原因如下：

• 当你把点击回调传给ToolButtons组件时，这个回调函数是在LocationTool第一次渲染时创建的，此时data还没从后端获取到，值为null，回调里就捕获了这个初始的null值。
• 后续useEffect拿到后端数据、更新data后，LocationTool会重新渲染，但如果你的回调没有跟着更新（比如没给回调加依赖），ToolButtons拿到的还是最初的那个旧回调，里面的data自然还是null。
• 而直接在LocationTool里写按钮的话，每次组件渲染都会重新创建新的回调函数，这个新回调会捕获当前最新的data值，所以能正常拿到数据。

解决办法 #

1. 用useCallback包裹回调并添加正确依赖

把回调函数用useCallback包装，同时把data加入依赖数组，这样每次data更新时，都会生成新的回调传给ToolButtons：

import { useCallback } from 'react';

// 在LocationTool组件内
const handleButtonClick = useCallback(() => {
  console.log('当前最新data:', data);
  // 这里处理按钮逻辑
}, [data]);

// 传给ToolButtons
<ToolButtons onButtonClick={handleButtonClick} />

2. 检查ToolButtons的缓存策略

如果ToolButtons用了React.memo做性能优化，要确保它能正确识别回调的变化。要么去掉不必要的memo，要么避免自定义memo的比较函数（容易引发其他问题）。

3. 用useRef保存最新数据（适合不想频繁更新回调的场景）

如果不想每次data变化都生成新的回调，可以用useRef来存储最新的data值，这样回调里总能拿到最新的内容：

import { useRef } from 'react';

// 在LocationTool组件内
const dataRef = useRef(null);

useEffect(() => {
  // 模拟从后端获取数据
  fetch('/api/location')
    .then(res => res.json())
    .then(resData => {
      setData(resData);
      dataRef.current = resData; // 更新ref的current值
    });
}, []);

const handleButtonClick = useCallback(() => {
  console.log('当前最新data:', dataRef.current);
  // 处理按钮逻辑
}, []); // 这里不需要加data依赖

内容的提问来源于stack exchange，提问作者John kerich