如何使用React Hooks获取数据并更新状态？资源数组状态异常排查

问题根源 #

你遇到的核心问题是**data为异步加载数据**：组件首次渲染时，data还未完成加载，此时resourcesData是全空数组，而useState的初始值仅在组件首次渲染时生效。后续data加载完成并更新后，resourcesData虽然能打印出有效数据，但useState不会自动同步这个变化，导致datos始终保持初始的空数组状态。

可行解决方案 #

方案1：通过useEffect监听数据变化同步状态 #

利用useEffect监听resourcesData的变化，当数据就绪时主动更新datos状态：

import React, { useState, useEffect } from 'react';

function YourComponent() {
  // 假设data是异步获取的（比如API请求、状态传递）
  const data = /* 你的异步数据来源 */;
  const resourcesData = data;
  const [datos, setDatos] = useState(resourcesData);

  useEffect(() => {
    // 当resourcesData有有效数据时更新状态
    if (resourcesData?.some(arr => arr.length > 0)) {
      // 浅拷贝数组确保React能检测到状态变化
      setDatos([...resourcesData]);
    }
  }, [resourcesData]); // 依赖项设置为resourcesData，数据变化时触发

  console.log(datos);
  return <div>你的组件内容</div>;
}

方案2：确保数据就绪后再初始化组件/状态 #

如果data是从父组件传递而来，可在父组件中做条件渲染，等data加载完成后再渲染当前组件：

// 父组件
function ParentComponent() {
  const [data, setData] = useState(null);

  // 模拟异步获取数据
  useEffect(() => {
    setTimeout(() => {
      // 假设这里拿到包含5空3有数据的数组
      setData([[], [], [], [], [], [{id:1}], [{id:2}], [{id:3}]]);
    }, 1000);
  }, []);

  // 数据未加载完成时显示加载状态
  if (!data) return <div>加载中...</div>;

  // 数据就绪后传递给子组件
  return <YourComponent data={data} />;
}

// 子组件
function YourComponent({ data }) {
  const resourcesData = data;
  // 此时data已完全就绪，useState初始化即可拿到正确数据
  const [datos, setDatos] = useState(resourcesData);

  console.log(datos);
  return <div>你的组件内容</div>;
}

额外注意事项 #

• 当需要修改datos中的数组或对象时，必须遵循不可变更新原则：
  • 添加元素：setDatos(prev => [...prev, newArray])
  • 修改某一数组项：setDatos(prev => prev.map((arr, idx) => idx === targetIdx ? [...arr, newItem] : arr))
    避免直接修改原状态，否则React无法检测到变化，组件不会重新渲染。

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