我正在做一个基本的反应项目，在那里我有对象和数组的反应状态，我想在这里完成的是我想将对象推送到images数组，我想在组件中呈现它，所以到目前为止，我在谷歌上搜索了一些方法来完成它，array.concat并且array.push我尝试了这两种方法，它正在更新状态，但它不会影响组件
下面是我试过的代码
const [proClrData, setProClrData] = useState([
{ color: "black", price: "", qty: "", images: [] },
{ color: "white", price: "", qty: "", images: [] },
{ color: "red", price: "", qty: "", images: [] }
]);
const addImages = (key) => {
var obj = { src: "", imgdata: "" };
proClrData[key].images = proClrData[key].images.concat(obj);
console.log(proClrData);
};
下面是组件代码
{proClrData.length >= 1 &&
proClrData?.map((clr, key) => {
return (
<div key={key}>
<p className="pt-3 ">{clr.color}</p>
<div className="form-group">
<input
label="Price"
name="price"
value={clr?.price}
type="number"
fullWidth
required
/>
</div>
<div className="form-group pt-3">
<input
label="Quantity"
name="qty"
value={clr?.qty}
type="number"
fullWidth
required
/>
</div>
<div className="text-end pt-3">
<button
variant="contained"
color="primary"
onClick={() => addImages(key)}
>
Add Images
</button>
</div>
{clr?.images?.map((img, imgkey) => {
return (
<div className="form-group pt-3" key={imgkey}>
<input
label="Image"
name="images"
value=""
accept="image/*"
type="file"
fullWidth
required
/>
</div>
);
})}
</div>
);
})}
这是工作代码的codeSandbox。
您正在改变状态对象，然后根本不更新状态。
const addImages = (key) => {
var obj = { src: "", imgdata: "" };
proClrData[key].images = proClrData[key].images.concat(obj); // mutation!!
console.log(proClrData);
};
使用您希望处于状态的新图像数据将状态更新排入队列。使用功能状态更新从之前的状态进行更新。对proClrData数组进行浅拷贝，对于匹配的元素，也进行浅拷贝，使其成为新的对象引用，然后对嵌套images数组进行浅拷贝，追加新对象。
const [proClrData, setProClrData] = useState([
{ color: "black", price: "", qty: "", images: [] },
{ color: "white", price: "", qty: "", images: [] },
{ color: "red", price: "", qty: "", images: [] }
]);
const addImages = (key) => {
const obj = { src: "", imgdata: "" };
setProClrData(data => data.map((el, i) => i === key ? {
...el,
images: [...el.images, obj],
} : el));
};
由于 React 状态更新是异步处理的，因此您需要将控制台日志移动到一个useEffect钩子中，以在状态更新后记录状态，并在下一次渲染时可用。
useEffect(() => {
console.log(proClrData);
}, [proClrData]);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句