如何在React中结合useState实现类似forEach+push的数组操作？

你的React代码存在几个关键问题： #

• forEach没有返回值，所以newData会是undefined，无法正确更新状态
• 直接在组件顶层调用fetchItems()会导致组件每次渲染都执行，陷入无限循环
• console.log(array)看不到最新值，因为useState的状态更新是异步的

简洁实现（无需push）： #

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [array, setArray] = useState([]);

  useEffect(() => {
    const fetchItems = async () => {
      const res = await getData();
      // 用map遍历生成处理后的新数组，替代forEach+push
      const newData = res.data.map(item => ({
        ...item,
        isSelected: false,
        id: getItemId(item.id)
      }));
      setArray(newData);
      // 直接打印刚生成的newData，能拿到最新值
      console.log(newData);
    };

    fetchItems();
  }, []); // 空依赖数组确保组件挂载时仅执行一次

  // 若需监听array更新后的状态，可添加此useEffect
  useEffect(() => {
    console.log(array);
  }, [array]);

  return <div>{/* 组件渲染内容 */}</div>;
};

export default YourComponent;

说明： #

1. 使用Array.map()替代forEach：map会直接返回处理后的新数组，代码更简洁，完全不需要push操作，和原代码逻辑完全一致
2. 用useEffect包裹接口调用：避免组件重复渲染时反复调用接口，空依赖数组保证仅在组件挂载时执行一次
3. 状态更新后的日志：因为useState是异步更新，直接在setArray后打印array拿不到最新值，要么打印刚生成的newData，要么用额外的useEffect监听array变化

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