React 组件不会将新添加的项目附加到列表中

Question

我有一个 React 组件，可以打印出对象数组中的项目列表。每个对象可以是新创建的对象，也可以是同一个对象但更新了一些属性。

更新现有对象没有问题，但是当接收到新对象时，数组的长度增加 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[] = [];

Answer 1

我不确定这是否是问题所在，但在使用渲染列表的任何地方都应该有“键”。

参见 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>
))}

Answer 2

实际上看起来您将在更新时用相同的任务对象替换每个元素，因为：

quest.id === quest.id

React 组件不会将新添加的项目附加到列表中

React component doesn't append newly added items to the list

typescript

reactjs

mobx-react