如何添加一个新的json对象数组，哪些元素将呈现为页面上的组件?

Question

我想改变一个数组的状态，它将有从data.js文件派生的值作为起点。改变状态意味着运行函数setAllThingsArray并添加新元素，该元素将根据之前的状态(thingsArray)使用函数setThingsArray进行设置。我是否需要映射allThingsArray来获得更新的数组与添加的元素，并列出它们?

import React from "react";
import data from "../data";
import Stamp from "../components/Stamp";
export default function AddItem(props) {

const [thingsArray, setThingsArray] = React.useState({
key: 9,
img: "../images/stamp1.jpg",
name: "Stamp 5",
description: "AAAA",
rating: 78.0,
});
function addItem() {
setAllThingsArray((prevAllThingsArray) => ({
arr: [
...prevAllThingsArray.arr,
setThingsArray((prevThingsArray) => ({
...prevThingsArray,
key: prevThingsArray.key + 1,
img: "../images/stamp1.jpg",
name: "Stamp 5",
description: "AAAA",
rating: 78.0,
})),
],
}));
}
const [allThingsArray, setAllThingsArray] = React.useState(data);
const allThingsElements = allThingsArray.map((st) => {
return <Stamp key={st.key} st={st} />;
});
return (
<>
<div className="form">
<input type="text" placeholder="Image" className="form--input" />
<input type="text" placeholder="Stamp title" className="form--input" />
<input type="text" placeholder="Description" className="form--input" />
<input type="text" placeholder="Rating" className="form--input" />
{/* <button className="form--button" onClick={addStampToJson(json_stamp)}>
Add Stamp
</button> */}
<button className="form--button" onClick={addItem}>
Add Stamp
</button>
</div>
<section className="stamps-list">{allThingsElements}</section>
</>
);
}

是否正确的地方setThingsArray函数内setAllThingsArray函数?

Answer 1

状态设置器(setAllThingsArray和setThingsArray)是异步的，因此不能在另一个状态更新中使用一个状态更新。setThingsArray本身也是一个函数(不是状态值)，所以也不能直接设置为setAllThingsArray

我建议您应该添加另一个变量来保持更新的对象(而不是更新的状态)，然后使用更新的对象单独更新状态。

function addItem() {
//add an updated object
const updatedThingsArray = {
...thingsArray, //this is an actual previous state
key: prevThingsArray.key + 1,
img: "../images/stamp1.jpg",
name: "Stamp 5",
description: "AAAA",
rating: 78.0,
}
setAllThingsArray((prevAllThingsArray) => ([
...prevAllThingsArray,
updatedThingsArray, //it's become a new object with your updated data
]));
setThingsArray(updatedThingsArray) //update it back to the `thingsArray` as the new state
}