我試圖做的是在值更改時不更改陣列內專案的鍵。所以基本上用戶可以更新、洗掉或添加新語言。要注意它在我的代碼中,我將不得不添加一個“已添加”鍵(這意味著用戶在創建帳戶時添加了一種語言。)當用戶添加一種新語言時,陣列將如下所示:
language:
[
{
added: "English"
},
"Italian" //the new language add by user when edit
]
父.js
const [language, setLanguage] = useState([])
useEffect(() => {
axios
.get('api').then((response) => {
response.data.user.map((user) => {setLanguage([...language,{added:user.language)}))
}, [])
child.js
export default function child({language, setLanguage}) {
const handleAddClick = () => {
setLanguage([...language, ""]);
};
const handleItemChanged = (event, index) => {
const value = event.target.value;
const list = [...language];
console.log("list: ", list);
list[index] = value;
setLanguage(list);
};
}
所以問題是當用戶更新有 key 的語言時,addedkey 會消失,陣列會變成這樣:
language:
[
"Englishhh", //updated
"Italian"
]
所以我想要這樣的結果:
language
[
{
added: "Englishhh" //updated
},
"Italian"
]
我該如何解決?
uj5u.com熱心網友回復:
在 handleItemChanged 中設定語言之前,您是否嘗試過這種方式?
if(typeof list[index] !== 'string'){
list[index].added = value;
}else{
list[index] = value;
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/504877.html
標籤:javascript 反应
上一篇:從ajax呼叫(jQuery)的html回應中獲取表單ID
下一篇:從記錄中拉出一個號碼到號碼
