Question

我正在更新我用于显示列表的React状态下的对象。状态正确更新，但是显示中断。

这是我的渲染函数中产生列表的代码部分。

this.state.shoppingItems ? this.state.shoppingItems.currentShoppingItems.map((item, index) => {
    console.log(item)
    return <ItemSummary key={index} onClickHandler={this.selectItem} updateShoppingItem={this.updateCurrentShoppingItem} shoppingItem={item} removeFromCurrentItems={this.removeFromCurrentItems} addToCurrentList={this.addToCurrentList} />
}) : undefined}

以下是产生先前项目列表的代码：

this.state.shoppingItems ? this.state.shoppingItems.previousShoppingItems.map((item, index) => {
    console.log(item)
    return <ItemSummary key={index} onClickHandler={this.selectItem} updateShoppingItem={this.updateCurrentShoppingItem} shoppingItem={item} removeFromCurrentItems={this.removeFromCurrentItems} addToCurrentList={this.addToCurrentList} />
}) : undefined}

这是从当前列表中删除项目并将其添加到发生问题的上一个列表中的方法。

removeFromCurrentItems(shoppingItem) {
        const items = this.state.shoppingItems.currentShoppingItems.filter(item => item._id !== shoppingItem._id);
        let shoppingItems = this.state.shoppingItems;
        shoppingItems.currentShoppingItems = items;
        shoppingItem.number = 0;
        shoppingItem.completed = false;
        shoppingItems.previousShoppingItems.push(shoppingItem);
        this.setState({
            shoppingItems: shoppingItems
        });
        // call to API to update in database
    }

这是删除项目之前的列表。

这是删除中间项目后的列表：

最后这是console.log输出，该输出显示各项已正确更新，但显示尚未更新：

我对来自角度的反应完全陌生，所以我不知道这是正确的方法还是更好的方法。但是有人可以帮我弄清楚为什么显示器没有更新吗？

Answer 1

问题是shoppingItems的更新。您保存对当前状态对象的引用，对其进行变异，然后将其存储回状态。首先将this.state.shoppingItems传播到一个新对象中将创建一个新的对象引用，以进行响应以获取更改。

React使用前一个状态和prop值与下一个状态和prop值的浅层对象比较来计算需要重新呈现到DOM和屏幕的内容。

removeFromCurrentItems(shoppingItem) {
  const items = this.state.shoppingItems.currentShoppingItems.filter(item => item._id !== shoppingItem._id);

  const shoppingItems = {...this.state.shoppingItems};
  shoppingItems.currentShoppingItems = items;
  shoppingItem.number = 0;
  shoppingItem.completed = false;
  shoppingItems.previousShoppingItems.push(shoppingItem);
  this.setState({
    shoppingItems: shoppingItems
  });
  // call to API to update in database
}

Answer 2

我的申请遇到了类似的问题，我不得不删除评论。

<textarea disabled key={note._id} className="form-control">{note.note}</textarea>

但是当我将 Key 属性添加到列表项时，问题得到了解决。

Answer 3

问题似乎是地图上该项目的关键。我用如下数据库中的项目ID替换了索引，现在它可以正确显示。

return <ItemSummary key={task._id} updateShoppingItem={this.updateCurrentShoppingItem} shoppingItem={task} removeFromCurrentItems={this.removeFromCurrentItems} addToCurrentList={this.addToCurrentList} />

类似的答案在这里： Change to React State doesn't update display in functional component

反应显示无法正确更新

3 个答案: