使用 React.js 在数组中追加对象

Question

这个 react 应用程序的目标是：首先，记录一组用户输入、名字和姓氏和地址;其次，为每组输入创建一个卡片对象;第三，将每个卡片对象存储到一个名为 List 的新数组中。经过一些在线咨询，代码修改如下。

const InputField=()=>{
const [lastName,setLastName]=useState("");
const [firstName,setFirstName]=useState("");
const [address,setAddress]=useState("");
const [card,setCard]=useState({});
const [list,setList]=useState([]);
const lastNameUpdate=(e)=>{
setLastName(e.target.value)
}
const firstNameUpdate=(e)=>{
setFirstName(e.target.value)
}
const addressUpdate=(e)=>{
setAddress(e.target.value)
}
const cardUpdate = (e, card) => {
e.preventDefault();
setCard({ lastName, firstName, address });
setList([...list, { ...card }]);
};
useEffect(()=>{
console.log(card)
console.log(list)
},[card,list])
return (
<div className="user-input-field">
<form type='submit'onSubmit={cardUpdate}>
<label>Last Name:</label>
<input type='text'value={lastName}onChange={lastNameUpdate}></input>
<label>First Name:</label>
<input type='text'value={firstName}onChange={firstNameUpdate}></input>
<label>Address:</label>
<textarea type='text'value={address}onChange={addressUpdate}></textarea>
<input type='submit'></input>
</form>
</div>
)
};

新的问题是，运行时，用户输入存储在 Card 对象中，但存储在 List 数组中时，对象为空。

伪代码：

a card_x object = {first name_x, last name_x, address_x}
a list array= [card_1, card_2, card_3...]

现在，单击"提交"按钮时将附加列表数组，但数组中的card_1、card_2、card_3等只是空对象。

Answer 1

我认为您应该将卡片更新更改为：

const cardUpdate = (e) => {
e.preventDefault();
const newCard = { lastName, firstName, address };
setCard(newCard);
setList([...list, { ...newCard }]);
};

希望这有帮助。