當前正在嘗試呈現隨著從自定義物件型別的陣列中添加/洗掉值而擴展/收縮的組件串列。但是，每當我呼叫將一個值推入一個新陣列然后將其傳遞給一個鉤子時，該陣列只會替換以前的值，而不是使物件串列更長。任何幫助表示贊賞。
// My interface
interface IAddedSkill {
id: string,
level: Level,
name: string,
}
const [potentialSkills, setPotentialSkills] = useState<IAddedSkill[]>([]);
let addedSkills: IAddedSkill[] = [];
function handleAddedSkills(addedSkill: IAddedSkill) {
addedSkills.push(addedSkill);
setPotentialSkills(addedSkills);
}
...some code in between
// Rendering the react component using this hook
{potentialSkills.map(skill => (
<Chip label={skill.name} onDelete={() => handleDelete(skill)} />
))}
誰能看到我做錯了什么會導致這種行為？
編輯：感謝所有答案，我使用的解決問題的實作是將 handleAddSkills 函式更改為：
function handleAddedSkills(addedSkill: IAddedSkill) {
setPotentialSkills([...potentialSkills, addedSkill]);
}
我還完全洗掉了對 addedSkills 串列的任何參考并洗掉了宣告。
uj5u.com熱心網友回復：
您的代碼在addedSkills每次渲染時都使用空陣列重新宣告變數，因此您setPotentialSkills的addedSkills長度始終等于 1。
您可以洗掉addedSkills，并呼叫setPotentialSkills如下：
setPotentialSkills((previousSkills) => [...previousSkills, addedSkill]);
uj5u.com熱心網友回復：
您還需要創建addedSkills一個狀態變數，否則每次渲染組件時它都會被覆寫。
let [addedSkills, setAddedSkills] = useState([])
uj5u.com熱心網友回復：
移除addedSkills陣列并potentialSkills直接更新狀態：
const [potentialSkills, setPotentialSkills] = useState<IAddedSkill[]>([]);
function handleAddedSkills(addedSkill: IAddedSkill) {
setPotentialSkills((oldSkills) => [...oldSkills, addedSkills]);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/457427.html
標籤：javascript 数组 反应 打字稿
上一篇：如何同時通過輸入和按鈕更改值
下一篇：從帶有`<!--paragraph{"className":"123"}-->`注釋的HTML字串中僅提取`className`之后的字符