如何使用 useState 在对象数组中添加用户输入？答案

【问题标题】：How do I add user input inside an object array with useState?如何使用 useState 在对象数组中添加用户输入？
【发布时间】：2022-01-01 16:06:09
【问题描述】：

我是 React 新手，我目前正在构建一个食谱网站，以在数据库 (Django) 中添加/编辑/删除食谱。我的问题是我的后端设置和正确的 JSON 格式，但我不知道如何正确操作前端的数据以最终发送到我的后端。代码和问题如下。

JSON

{
        "id": 1,
        "name": "Pizza",
        "description": "Good Pizza",
        "ingredients": [
            {
                "ingredients": "cheese"
            }
        ]
    }

反应


const Home = () => {
  const [item, setItem] = useState({
    name: "",
    description: "",
    ingredients: [{
        ingredients: ''
    }],
  });

  const handleInputChange = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    if (name === "ingredients") {
      setItem({ ingredients: [{ [name]: value }] });
    } else {
      setItem({ [name]: value });
    }
  };

  console.log(item);  // using to keep track of what has changed

  return (
    <div>
      <form>
        <input
          name="name"
          type="text"
          value={item.name}
          onChange={handleInputChange}
        />
        <input
          name="ingredients"
          type="text"
          value={item.ingredients[0].ingredients} // im like 200% sure this is wrong...
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
};

export default Home;

将用户输入提交给名称或描述工作正常，但是一旦我尝试添加成分，我就会遇到各种问题，而且我似乎找不到正确的前进方向。我知道我的代码在反应方面是最少的，但我想在我继续添加其他任何东西（添加额外的输入、样式、REST 操作）之前先把这些成分弄下来。谢谢！

【问题讨论】：

调用setItem 时，您可能应该使用扩展运算符...，在您当前的代码中，您将项目完全设置为一个新对象。例如，在setItem({[name]:value}) 中，您将状态设置为只有一个键的对象。要使用相同的键保持对象并仅修改您想要的键，请改用setItem({...item, [name]:value})
哇，这正是我一直需要的信息……谢谢！

标签： reactjs json

【解决方案1】：

所以我会删除这个 ingredients 重复，所以它是一个简单的字符串数组：

    {
        "id": 1,
        "name": "Pizza",
        "description": "Good Pizza",
        "ingredients": ["cheese"]
    }

那么你对状态值的修改就像将一个对象添加到一个数组一样简单：

const addIngredient = (value) => {
    setItem(prevItem => {
        return (
            ...prevItem,
            ingredients: [...prevItem.ingredients, value],
        );
    });
}

【讨论】：