ReactJS中如何正确向对象数组添加新元素？

• 直接用let定义的普通数组修改后不会触发React重渲染，动态渲染的列表数据必须存放在组件状态中，只有更新状态才会同步刷新页面
• datos.push(title, id = titulo, ide)写法完全错误：目标数组是对象数组，新增元素需要传入和现有元素结构一致的{title: xxx, id: xxx}格式对象，且代码中存在变量名混淆，定义的变量是ide、titulo，传参时错写为title、id
• 直接通过document.getElementById获取DOM值不符合React开发范式，表单输入推荐使用受控组件方案，和状态绑定后更易维护
• 类组件自定义方法如果不做this绑定，触发时会出现this指向错误

import React from "react";

class TodoApp extends React.Component {
  // 列表数据、输入框值统一存在state中管理
  state = {
    datos: [
      { title: "Event 1", id: "1" },
      { title: "Event 2", id: "2" },
      { title: "Event 3", id: "3" },
      { title: "Event 4", id: "4" },
      { title: "Event 5", id: "5" }
    ],
    idInput: "",
    titleInput: ""
  };

  // 箭头函数写法自动绑定this，无需手动bind
  handleInputUpdate = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  Capturar = () => {
    const { idInput, titleInput, datos } = this.state;
    // 空值拦截
    if (!idInput.trim() || !titleInput.trim()) return;
    // 不直接修改原数组，生成新数组传入setState触发视图更新
    this.setState({
      datos: [...datos, { id: idInput, title: titleInput }],
      // 提交后清空输入框
      idInput: "",
      titleInput: ""
    });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          placeholder="输入事件ID"
          name="idInput"
          value={this.state.idInput}
          onChange={this.handleInputUpdate}
          style={{ width: "20%", marginRight: "10px" }}
        />
        <input
          type="text"
          placeholder="输入事件标题"
          name="titleInput"
          value={this.state.titleInput}
          onChange={this.handleInputUpdate}
          style={{ width: "20%", marginRight: "10px" }}
        />

        <button style={{ marginTop: "10px" }} onClick={this.Capturar}>
          Agregar tarea
        </button>

        {/* 列表渲染 */}
        <div style={{marginTop: "20px"}}>
          {this.state.datos.map((item) => (
            <div key={item.id}>
              ID: {item.id} | 标题: {item.title}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default TodoApp;

• React遵循状态驱动视图的逻辑，所有影响页面展示的动态数据必须放在state（类组件）或useState定义的状态（函数组件）中，直接修改普通变量不会触发页面更新
• 更新数组、对象这类引用类型的状态时，禁止直接修改原状态值（比如直接对原数组调用push、splice等修改方法），需要生成新的引用值再传给状态更新方法，否则React无法检测到状态变化
• 表单场景优先使用受控组件，将输入框的value和状态绑定，通过onChange事件同步输入值，无需手动操作DOM获取内容，代码逻辑更清晰可维护

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