React中itemList数组无法追加值，点击添加后值被替换的问题求助

你代码里的itemList是普通数组，不是React状态变量。每次组件重新渲染（比如输入框内容变化、点击按钮），这个数组都会被重新初始化为空数组，所以每次添加新值时，看起来都是替换了旧值——其实是旧数组已经被销毁，新数组里只有刚push的那个值。另外就算数组能保留值，因为它不是状态，组件也不会自动重新渲染更新列表。

把itemList改成React状态变量，用useState初始化，添加元素时通过状态更新函数创建新数组（React要求状态不可变，不能直接修改原数组），最后遍历状态数组渲染所有列表项。

完整修复代码 #

import { useState } from 'react';

function App() {
  // 将itemList改为状态，初始化为空数组
  const [itemList, setItemList] = useState([]);
  const [item, updateItm] = useState('');

  const listenInput = function (e) {
    updateItm(e.target.value);
  }

  const addItem = function() {
    // 输入不为空时才执行添加逻辑
    if (item.trim()) {
      // 基于之前的列表状态，生成新数组追加元素
      setItemList(prevList => [...prevList, item]);
      // 清空输入框
      updateItm('');
    }
  }

  return (
    <>
      <div className='main-div'>
        <div className='center-div'>
          <h1>To Do</h1>
          <input
            onChange={listenInput}
            type='text'
            name='item'
            placeholder='Add item'
            value={item} // 绑定value，实现受控组件
          />
          <button onClick={addItem}>+</button>
          <ol>
            {/* 遍历itemList渲染所有待办项 */}
            {itemList.map((todo, index) => (
              <li key={index}>{todo}</li>
            ))}
          </ol>
        </div>
      </div>
    </>
  );
}

关键改动说明 #

• 用useState([])声明itemList状态，替代普通数组
• 添加元素时，通过setItemList接收历史状态，用展开运算符生成新数组（遵循React状态不可变原则）
• 输入框改为受控组件，绑定value={item}，添加完成后清空输入框
• 渲染部分用map遍历itemList生成所有列表项，给每个<li>添加唯一key（示例用index，实际项目建议用业务唯一ID）

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