React问题：点击添加按钮后输入值未显示在列表中怎么办？

问题根源 #

你遇到的问题核心在于父组件更新列表状态时，没有改变数组的引用。React依赖状态的引用变化来触发重渲染，如果直接用push、unshift这类修改原数组的方法，数组本身的引用没发生改变，React会判定状态未更新，因此不会重新渲染列表。

修复方案 #

在父组件的添加逻辑中，必须创建新数组来更新状态，而非修改原数组。可以通过扩展运算符或concat方法实现：

完整示例代码

import React, { useState } from 'react';

const InputWithAddBtn = props => {
  const [value, setValue] = React.useState('');

  return (
    <div>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
      <button onClick={() => {
        props.add(value);
        setValue(''); // 可选：点击添加后清空输入框
      }}>+</button>
    </div>
  );
};

const App = () => {
  const [list, setList] = useState([]);

  const handleAdd = (item) => {
    // 错误写法：直接修改原数组，无法触发重渲染
    // list.push(item);
    // setList(list);

    // 正确写法1：用扩展运算符生成新数组
    setList([...list, item]);

    // 正确写法2：用concat返回新数组
    // setList(list.concat(item));
  };

  return (
    <div>
      <InputWithAddBtn add={handleAdd} />
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

关键说明 #

• 状态更新要遵循不可变原则：数组、对象这类引用类型的状态，永远不要直接修改原数据，必须返回新的引用。
• 列表渲染要加key：给每个列表项添加唯一key（示例用index是简化写法，实际项目建议用数据自身的唯一ID），帮助React高效识别元素变化。

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