React中useEffect获取数据后无法读取length，新增useEffect仍报错

错误根源 #

你遇到的问题核心是初始 state 未定义：const [data, setData] = useState(); 会让data在组件首次渲染时为undefined，直接访问data.length就会触发Cannot read properties of undefined错误。异步请求完成前，data始终是undefined，新增useEffect如果没做判断直接调用data也会报错。

分步解决方案 #

1. 初始化 state 为空数组

把data的初始值设为空数组，避免首次渲染时出现undefined：

const [data, setData] = useState([]);
const [processedData, setProcessedData] = useState([]); // 存储 map 后的结果
const [loading, setLoading] = useState(true);

2. 安全处理接口返回数据

在设置data时，给接口返回值加默认空数组，防止接口返回undefined或非数组类型：

useEffect(() => {
  const reqObj = {
    page: "1",
    size: "10",
    sort_field: "id",
  };
  getWalkthroughs(reqObj)
    .then((response) => {
      if (response?.success) {
        // 确保 data 始终是数组类型
        setData(response?.data?.writeups || []);
        setLoading(false);
      }
    })
    .catch((err) => {
      console.log("err", err);
      setLoading(false); // 出错也要终止加载状态
    });
}, []);

3. 新增 useEffect 处理 map 操作

添加依赖data的useEffect，只有当data更新且为数组时，才执行 map 操作并存入新 state：

useEffect(() => {
  // 先判断 data 是否为数组，避免非数组类型触发 map 错误
  if (!Array.isArray(data)) return;

  // 执行你的 map 逻辑，示例为转换字段格式
  const mappedData = data.map(item => ({
    id: item.id,
    title: item.title,
    content: item.content
    // 按需添加其他字段...
  }));

  setProcessedData(mappedData);
}, [data]); // 依赖 data，data 变化时自动重新执行

4. 安全使用处理后的 state

之后你可以直接把processedData作为参数传递给子组件，因为它始终是数组（初始为空，数据加载后为映射结果）：

<YourChildComponent data={processedData} />

额外注意 #

如果需要在其他地方访问data的属性，比如data.length，可以用可选链操作符做安全访问：

console.log(data?.length); // 当 data 为 undefined 时返回 undefined，不会报错

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