如何添加多个项目太多的对象数组

Question

我列出了一个项目列表，我可以添加项目，但我只能添加一个或另一个，不能同时添加。描述值被正确填充，但是配方没有。

这是我制作的代码沙盒。

https://codesandbox.io/s/magical-pond-vtu51?file=/src/App.js

import React, { useState } from "react";
const NewMenu = () => {
const [recipeName, setRecipeName] = useState("");
const [descriptionItem, setDescriptionItem] = useState("");
const [items, setItems] = useState([
{ itemName: "Chicken", description: "chicken test", id: 0 }
]);
const handleAddButtonClick = (e) => {
e.preventDefault();
const newItem = {
recipeName: recipeName,
description: descriptionItem,
id: items.length
};
const newItems = [...items, newItem];
setItems(newItems);
// setRecipeName("");
// setDescriptionItem("");
console.log(items.description);
console.log(items.id); //...
};
const removeTodo = (id) => {
console.log(id);
setItems(items.filter((item) => item.id !== id));
};
console.log(descriptionItem);
return (
<div>
<form>
<input
value={recipeName}
onChange={(event) => setRecipeName(event.target.value)}
className="add-item-input"
placeholder="Add a recipe..."
/>
<input
value={descriptionItem}
onChange={(event) => setDescriptionItem(event.target.value)}
className="add-item-input"
placeholder="Add a Description..."
/>
<input type="submit" onClick={(e) => handleAddButtonClick(e)} />
</form>
{items.map((item, index) => (
<div>
Recipe: {item.itemName} Description: {item.description}
<button onClick={() => removeTodo(item.id)}>Remove </button>{" "}
</div>
))}
</div>
);
};
export default NewMenu;

Answer 1

要添加的新Item应该具有itemName属性，而不是recipeName

代码沙箱

const newItem = {
itemName: recipeName,  // change from recipeName to itemName
description: descriptionItem,
id: items.length
};

您可以在JSX中将itemName更改为recipeName，也可以在添加newItem时将recipeName更改为itemName。

Answer 2

@decpk是对的。你的问题很容易解决。

为items创建状态值时

const [items, setItems] = useState([
{ itemName: "Chicken", description: "chicken test", id: 0 }
]);

items状态有三个属性：itemName、description和id

但是你在第12行中写错了属性

const newItem = {
recipeName: recipeName,         // property need to change itemName not recipeName
description: descriptionItem,
id: items.length
};