ReactJS实现用户输入存入数组并展示的方法咨询

你的代码核心问题是每次输入都会把数组状态直接替换成输入框的字符串，而不是往数组里追加元素，自然没法用数组方法展示内容。下面是修正后的实现方案：

基础实现（点击按钮添加） #

import { useState } from 'react';

function InputToArray() {
  // 存储数组的状态
  const [array, setArray] = useState([]);
  // 单独存储输入框的实时值，避免干扰数组状态
  const [inputValue, setInputValue] = useState('');

  // 点击按钮时将输入值添加到数组
  const handleAdd = () => {
    // 过滤空输入
    if (!inputValue.trim()) return;
    // 基于原数组创建新数组，确保状态更新的正确性
    setArray(prevArray => [...prevArray, inputValue]);
    // 清空输入框
    setInputValue('');
  };

  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={(e) => setInputValue(e.target.value)} 
      />
      <button onClick={handleAdd}>添加到数组</button>
      
      <h3>已添加的内容：</h3>
      {/* 用map遍历数组，渲染每个元素 */}
      <ul>
        {array.map((item, index) => (
          {/* 必须给每个列表项加唯一key，React依赖它优化DOM更新 */}
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default InputToArray;

关键细节说明 #

• 用单独的inputValue状态管理输入框内容，避免直接修改数组状态导致的逻辑混乱。
• 添加元素时，使用函数式更新（setArray(prevArray => ...)）确保拿到最新的数组状态，这是React状态更新的最佳实践。
• 用array.map()遍历数组生成DOM元素，每个元素必须带唯一的key属性（这里用index是简单方案，生产环境最好用每个元素的唯一ID）。

进阶：按回车直接添加 #

如果不想用按钮，想按回车就把内容加入数组，可以给输入框加onKeyPress事件：

const handleKeyPress = (e) => {
  if (e.key === 'Enter' && inputValue.trim()) {
    setArray(prevArray => [...prevArray, inputValue]);
    setInputValue('');
  }
};

// 给输入框绑定事件
<input 
  type="text" 
  value={inputValue} 
  onChange={(e) => setInputValue(e.target.value)}
  onKeyPress={handleKeyPress}
/>

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