我見過帶有通用句柄更改功能的打字稿解決方案，但在我的情況下它效果不佳。需要幫助來了解為什么會發生這種情況。
當我添加新產品時 - 它添加正確，但是當我嘗試手動清除輸入時 - 首先重新渲染它也會更改已添加的內容。
看到這個錯誤的演算法：填充輸入，添加提交并從標題輸入中洗掉一個字母 - 你會看到它會影響在另一個狀態下已經添加的標題，但僅在第一次重新渲染時
沙盒：https ://codesandbox.io/s/restless-dream-do7bqh?file=/src/App.tsx
uj5u.com熱心網友回復：
以下代碼示例可能是實作預期目標的解決方案：
在handleChange方法中：
setProduct(prev => ({ ...prev, [name]: value }));
解釋
- 的
prev值按product原樣 - 然后，使用
...傳播運算子傳播所有prev的道具 - 現在緊隨其后的
[name]是一個新的道具被添加value為相應的值 - 任何現有的道具都將被替換。
假設name變數的值為'title'并且value是'Testing 123'，那么product物件變為：
product = {
id: previousValueOfId,
price: previousValueOfPrice,
title: 'Testing 123'
}
在這里，previousValueOfId并且previousValueOfPrice應該是值。
為什么 OP 的代碼沒有得到想要的結果
代碼是：
setProduct((prev) => {
(prev as any)[name] = value;
const newValue = { ...prev };
return newValue;
});
- 這需要
prev產品，并改變它的[name]道具。 - 更改時
prev，可能會影響使用product.
（注意：我對 ReactJS 還是很陌生，如果這不正確，請適當更新）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/441668.html
標籤：javascript 反应 打字稿
上一篇：修改JSON字串
下一篇：我的Chart.js餅圖不作業