React.js状态异常：控制台输出正常但无法设置labels状态

问题核心排查 #

从你的代码和日志来看，主要存在几个明显问题导致labels状态看似未更新：

1. 缺失状态声明：代码中调用了setNavData，但组件内没有声明navData对应的状态变量，这会导致数据无法正确存储，甚至引发隐性报错。
2. 异步状态更新误区：React的setState是异步操作，你在调用setLabels后立刻console.log(labels)，打印的始终是更新前的旧状态值，这会让你误以为状态没更新。
3. 变量名拼写错误：多处出现naData和navData的拼写混淆，比如console.log("NA Data from labels:", naData)、setLabelsLength(naData.length)，这些错误会导致数据引用异常。
4. 未定义变量：console.log("data", data)中的data未定义，属于无效代码。

修复后的代码 #

function Performance() {
  // 补充navData状态声明，用于存储接口返回数据
  const [navData, setNavData] = useState([]);
  const [labelsLength, setLabelsLength] = useState(0);
  const [labels, setLabels] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const navData = await getNaData();
        // 修正变量名拼写错误
        console.log("NA Data from labels:", navData);
        setNavData(navData);
        
        setLabels(
          navData.map((item, index) => {
            console.log("Item:", item.date);
            return `Label ${item.date}`;
          })
        );

        // 修正变量名拼写错误
        setLabelsLength(navData.length);
        
        console.log("Fetched data length:", navData.length);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, [xAxisInterval]);

  // 单独用useEffect监听状态变化，查看最新的labels值
  useEffect(() => {
    console.log("Updated labels:", labels);
    console.log("Updated labelsLength:", labelsLength);
  }, [labels, labelsLength]);
}

修复说明 #

1. 补充navData状态声明，确保接口返回的数据能正确存储和后续使用。
2. 修正所有变量名拼写错误，保证数据引用的一致性。
3. 移除即时打印状态的无效代码，改用单独的useEffect监听labels和labelsLength的变化，这样才能获取到更新后的真实状态值。
4. 保留对接口返回数据的日志打印，方便验证数据是否正确获取。

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