React中点击按钮如何将新表单项拼接至现有state数组？

你的问题出在addItem函数里——你只是获取了输入框的值，但没有调用addVal去更新数组状态。React里更新数组类型的state时，必须创建新数组（不能直接修改原数组），下面是修复后的代码：

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

let App = ()=>{

const [initial, addInitial] = useState('');
const [val, addVal] = useState(["Banana"]);

  let changeHandler = (e)=>{
    addInitial(e.target.value)
  }

  let addItem =()=>{
    // 先判断输入是否为空，避免添加空项
    if (!initial.trim()) return;
    
    // 用扩展运算符创建新数组，把新项加进去
    addVal(prevVal => [...prevVal, initial]);
    // 清空输入框
    addInitial('');
  }

    return(
    <div id="parent">
        <div id="container">
            <h1>To-Do List</h1>

          <div id="sub1">
            <input type="text" value={initial} onChange ={changeHandler} placeholder='Add a item' autoFocus/>
            <button id="add" onClick = {addItem}>+</button>
          </div>
          
            
          <div id="sub2">
            
            {
              val.map((name, index)=>{
                return(
                  <div id="cross" key={index}> 
                    <button id="remove">&#10060;</button>
                    {name}
                  </div>
                )})
            }

          </div>
        </div>
    </div>
    )
}

export default App;

关键说明： #

• 更新数组state时，使用函数式更新（prevVal => [...prevVal, initial]），这样能确保拿到最新的state值，避免因为state异步更新导致的问题。
• 用扩展运算符[...prevVal, initial]创建新数组，而不是直接修改原数组（比如prevVal.push(initial)），因为React的state是不可变的，直接修改不会触发组件重新渲染。
• 添加了空值判断，防止用户点击按钮添加空内容，同时在添加后清空输入框，提升用户体验。

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