我在為我的陣列的動態復選框設定狀態時遇到問題，使用檢查的處理程式將物件從 false 更改為 true。
下面是我的代碼：
const [form, setForm] = useState({
tags:[
{ name: "Athletic/Higher caloric", isChecked: false },
{ name: "Aggressive Weight Loss", isChecked: false },
{ name: "Quick and Easy", isChecked: false } ]})
const onCheckedHandler = (index) => {
const updatedTags =
form.tags.map((tag, i) => {
if (index === i) {
form.tags[i].isChecked = !form.tags[i].isChecked;
}
return { tag };
});
setForm(updatedTags);
return (
{form.tags.map((tag, i) => (
<div>
<label>{tag.name}</label>
<input
type="checkbox"
checked={tag.isChecked}
onChange={(event) => onCheckedHandler(i)}
key={i} />
</div>
))})
我收到此錯誤：“未捕獲的型別錯誤：無法在創建時讀取未定義的屬性（讀取'地圖'）（行：107）”
但是第 107 行只是另一個地圖函式的開始，它可以作業并且完全不相關。我究竟做錯了什么？我嘗試避免使用 if 陳述句直接在物件中改變 isChecked 值。也許這就是我設定狀態的方式？
uj5u.com熱心網友回復：
我的理解是：
- 初始狀態是一個物件
const [form, setForm] = useState({...}); - 這有一個名為標簽的道具。
- 但是，變數
updatedTags（在處理程式方法中）是一個陣列。它不是一個物件。 - 因此， setForm(updatedTags) 將設定
form為一個陣列，該陣列不會有任何命名的道具tags
因此，請嘗試像這樣更改處理程式：
const onCheckedHandler = (index) => {
setForm(prev => ({
...prev,
tags: [
...prev?.tags?.map(
({isChecked, ...rest}, idx) => (
idx === index
? {...rest, isChecked: !isChecked}
: {...rest, isChecked}
)
)
]
}));
};
此外，請在嘗試地圖之前使用檢查return。可能會嘗試這樣的事情：
form?.tags?.map(...)
要么
form && form.tags && Array.isArray(form.tags) && form.tags.map(...)
uj5u.com熱心網友回復：
問題可能來自這里：
return (
{form.tags.map((tag, i) => (
<div>
<label>{tag.name}</label>
<input
type="checkbox"
checked={tag.isChecked}
onChange={(event) => onCheckedHandler(i)}
key={i} />
</div>))}
)
問題是您嘗試使用form（組件）安裝時可能為undefined. 正如您的錯誤所說cannot read property of undefined, reading map，它可能指的form.tags是未定義并且無法讀取它的地圖。
一個好主意是在渲染之前檢查您嘗試渲染的內容是否已定義。例如：
return (
{form.tags ? form.tags.map((tag, i) => (
<div>
<label>{tag.name}</label>
<input
type="checkbox"
checked={tag.isChecked}
onChange={(event) => onCheckedHandler(i)}
key={i} />
</div>)) : <div>Loading</div>}
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/455827.html
上一篇：C#屬性是物件嗎？