我有一個反應組件，它從物件陣列中列印出專案串列。每個物件可以是新創建的，也可以是同一個物件，但其某些屬性已更新。
更新現有物件沒有問題，但是當接收到新物件時，陣列的長度增加 1，并且所有元素都成為新添加物件的副本。
這是反應組件：
{quests.map(quest => (
<div>
<div className={styles.questTitle}>{quest.description.title}</div>
<ul className={styles.questsList}>
{quest.description.steps.map(step => (
<li key={quest.id} className={styles.questStep}>{`${quest.status}/2 ${step}`}</li>
))}
</ul>
</div>
))}以下是它的更新方式：
@action
setQuests(quest: QuestFuncReturnValue) {
// If the quest doesn't exist, append it to the quests list, else update it
const questExists = this.quests.find(oldQuest => oldQuest.id === quest.id);
if (!questExists) {
this.quests = [...this.quests, quest];
return;
}
const updatedQuests = this.quests.map(oldQuest => (quest.id === quest.id ? quest : oldQuest));
this.quests = updatedQuests;
console.log(this.quests);
}我使用 Mobx 作為狀態：這是數??組的初始值：
@observable.ref quests: QuestFuncReturnValue[] = [];uj5u.com熱心網友回復：
我不確定這是否是問題所在，但是在您使用渲染串列的任何地方都應該有“關鍵”。
見 key={quest.id} 和 key={step}
{quests.map(quest => (
<div key={quest.id}>
<div className={styles.questTitle}>{quest.description.title}</div>
<ul className={styles.questsList}>
{quest.description.steps.map(step => (
<li key={step} className={styles.questStep}>{`${quest.status}/2 ${step}`}</li>
))}
</ul>
</div>
))}uj5u.com熱心網友回復：
實際上，您似乎將在更新時將每個元素替換為相同的任務物件，因為：
quest.id === quest.id
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/419260.html
標籤：