React中数组新增值后无法渲染及控制台无输出的解决方法

问题根源 #

你当前代码里用let声明了普通变量DataList，React不会追踪普通变量的变化，所以即使修改了数组内容，组件也不会重新渲染，导致map里的console.log不会执行新内容，页面也无法显示更新后的值。虽然你导入了useState，但并没有用它来管理状态，这是核心问题。

修复后的代码 #

import "./App.css";
import Home from "./Components/Home";
import { useState } from 'react';

let App = () => {
  // 用useState管理数组状态
  const [DataList, setDataList] = useState(["Apple","Banana"]);

  const newList = (data)=>{
      // 使用setDataList更新状态，函数式更新确保拿到最新数组
      setDataList(prevList => [...prevList, data]);
  }

  return (
    <div>
      <Home newList={newList}/>
      
      {DataList.map((val, index)=>{
          console.log(val);
          // 若要渲染到页面，返回对应JSX元素，key需唯一
          return <div key={index}>{val}</div>;
        }) 
      }
    </div>
  )
};

export default App;

关键修改点 #

• 用useState初始化并管理数组状态，React会自动追踪状态变化，触发组件重渲染。
• 更新数组时必须调用setDataList，这里用函数式更新（prevList => [...prevList, data]），确保每次更新都基于最新的数组状态，避免闭包导致的旧值问题。
• map方法若要渲染元素，需返回合法JSX，同时给每个元素添加唯一key属性，这是React列表渲染的强制要求。

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