React嵌套数组状态更新问题：配料组件开发求助

先梳理你代码里的核心问题：

• 状态属性大小写不统一：state定义的是Ingredients，但处理函数里用this.state.ingredients（小写i），根本拿不到正确的状态数据
• 方法调用名称错误：按钮里调用的handleAddressChange是不存在的，应该是handleIngredientChange
• 事件绑定错误：submit按钮用了onChange，而且当前逻辑是要添加新配料，不是提交现有项
• 输入框未绑定更新事件：三个输入框没挂onChange，输入内容根本不会同步到状态里
• 重复渲染输入区域：现在会给每个已有的配料都渲染一套输入框，这完全不符合“添加新配料”的需求

下面是修正后的完整代码，实现输入后点击添加，新配料显示在顶部的功能：

import React, { Component } from "react";

class AddRecipe extends Component {
  state = {
    // 统一小写开头，符合React命名规范
    ingredients: [],
    // 单独维护当前输入的配料项，避免和已添加的列表混淆
    currentIngredient: { name: "", qty: "", measurement: "" }
  };

  // 处理当前输入框的内容变化
  handleCurrentIngredientChange = (event, field) => {
    this.setState(prevState => ({
      currentIngredient: {
        ...prevState.currentIngredient,
        [field]: event.target.value
      }
    }));
  };

  // 添加配料到列表顶部
  addIngredient = () => {
    const { currentIngredient, ingredients } = this.state;
    // 校验输入内容非空（可选，根据需求调整）
    if (!currentIngredient.name.trim()) return;
    
    // 把新配料放到数组开头，实现显示在顶部
    this.setState({
      ingredients: [currentIngredient, ...ingredients],
      // 清空输入框
      currentIngredient: { name: "", qty: "", measurement: "" }
    });
  };

  render() {
    const { ingredients, currentIngredient } = this.state;
    return (
      <div>
        {/* 已添加的配料列表，显示在顶部 */}
        <div>
          <h3>已添加配料</h3>
          <ul>
            {ingredients.map((ingredient, index) => (
              <li key={index}>
                {ingredient.qty} {ingredient.measurement} {ingredient.name}
              </li>
            ))}
          </ul>
        </div>

        {/* 添加新配料的输入区域 */}
        <div>
          <h3>添加新配料</h3>
          <input
            type="text"
            placeholder="数量"
            value={currentIngredient.qty}
            onChange={(e) => this.handleCurrentIngredientChange(e, "qty")}
          />
          <input
            type="text"
            placeholder="单位"
            value={currentIngredient.measurement}
            onChange={(e) => this.handleCurrentIngredientChange(e, "measurement")}
          />
          <input
            type="text"
            placeholder="配料名称"
            value={currentIngredient.name}
            onChange={(e) => this.handleCurrentIngredientChange(e, "name")}
          />
          <button onClick={this.addIngredient}>添加配料</button>
        </div>
      </div>
    );
  }
}

export default AddRecipe;

关键修改说明：

• 拆分状态：用currentIngredient维护当前输入的内容，和已添加的ingredients列表分开，避免嵌套状态更新的混乱
• 添加逻辑：点击按钮时把当前输入的配料放到数组开头，自然就显示在列表顶部
• 统一命名：所有状态和方法的名称保持一致规范，避免大小写错误
• 绑定正确事件：每个输入框都绑定onChange，按钮用onClick触发添加操作

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