向React state字典对象添加元素时name和cost为null如何解决

问题出在以下几个地方： #

• 表单输入项缺失name属性：handleChange方法依赖event.target.name匹配要更新的状态字段，但你的两个输入框仅设置了id属性，未设置对应的name="name"和name="cost"，输入内容无法正确写入state。
• 缺少独立的表单输入状态：当前state仅包含存储所有消费条目的expenses数组，没有单独的name、cost字段存储用户正在输入的内容。你直接把输入框的value绑定到this.state.expenses.name，但expenses是数组类型，不存在name属性，取值自然为undefined。
• 提交逻辑取值和数组拼接错误：提交时你取的this.state.expenses.name（数组无该属性）和未定义的this.state.expense.cost本身就是无效值，同时数组拼接顺序写反，会导致整个旧数组被当成新数组的第一个元素，数据结构完全错误。
• React JSX 规范问题：原生HTML的for属性在JSX中要写为htmlFor，列表渲染时需要指定key属性避免控制台警告。

修正后的完整代码： #

import React, { Component } from "react";
import ExpenseItem from "./ExpenseItem.js";

class ExpensesList extends Component {
  state = {
    expenses: [{id: '12345' ,name: 'Pizza', cost: '20'}],
    // 新增两个字段存储表单输入内容
    name: '',
    cost: ''
  };

  handleChange=(event)=>{
    this.setState({[event.target.name]: event.target.value});
  }

  handleSubmit = (event) => {
    event.preventDefault();
    // 构造新消费条目
    const newExpense = {
      id: Math.random().toString(),
      name: this.state.name,
      cost: this.state.cost
    }
    this.setState({
      expenses: [...this.state.expenses, newExpense],
      // 提交后清空输入框
      name: '',
      cost: ''
    });
  }

  render() {
    return (
      <div>
        <ul className="list-group">
          {this.state.expenses.map((expense) => (
            <ExpenseItem
              key={expense.id}
              id={expense.id}
              name={expense.name}
              cost={expense.cost}
            />
          ))}
        </ul>
        <div className ="row mt-3">
          <h2> Add Expenses </h2>
          <form onSubmit={this.handleSubmit}>
            <div className="row">
              <div className="form-group">
                <label htmlFor="name">Name</label>
                <input
                  required="required"
                  type="text"
                  className="form-control"
                  id="name"
                  name="name"
                  value = {this.state.name}
                  onChange = {this.handleChange}
                ></input>
              </div>
              <div className="form-group">
                <label htmlFor="cost">Cost</label>
                <input
                  required="required"
                  type="text"
                  className="form-control"
                  id="cost"
                  name="cost"
                  value = {this.state.cost}
                  onChange = {this.handleChange}
                ></input>
              </div>
              <div className="form-group">
                <button type="submit" className="btn btn-primary"> Add Expense</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default ExpensesList;

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