javascript - React.js - 更新项目后重新绘制数组

Question

我有这样的状态:

this.state = {
  items = []
}

状态是从 REST 服务加载的，该服务工作正常。但是后来，当用户编辑状态中的一项时，我使用不变性助手来更新状态:

 const newState = update(this.state, {
            items: {
                [index]: {$set: newItem}
            }
  });
 this.setState(newState);

这不会被重新绘制(渲染方法将通过，但页面上没有进行可见的更改)，我知道为什么:

因为我正在创建数组来渲染，如下所示:

render(){
  let itemsrender=[];
  for (let i in this.state.items){
      let line="";
      if (i<this.state.items.length-1) line=<div className="row line"></div>;
            atcrender.push(
                <div key={this.state.item[i].id}>
                    <div className="row" >
                        <ITEM
                          item={this.state.items[i]}
                          onUpdate={this.onUpdate}
                          onDelete={this.onDelete}
                        />
                    </div>
                    {line}
                </div>
            )
        }
  return(
   <div>{itemsrender}</div>
  );

}

如果我无法编辑 ITEM 的渲染方法，是否有任何解决方案可以使项目在更新时重新渲染？我想到的唯一一个就是创建包装组件。

Answer 1

我认为问题出在 let itemsrender 上，因为这是从 render 方法返回的内容，这就是将要渲染的全部内容。您似乎没有在循环中的任何地方更新它，因此渲染方法的返回永远不会改变。

您还可以通过映射状态来重写它，这可能会让您更容易看到发生了什么。

render() {
     return (
       <div>
        {this.state.items.map((item, index) => {
          <div key={item.id}>
            <div className="row" >
              <ITEM
                item={item}
                onUpdate={this.onUpdate}
                onDelete={this.onDelete}
              />
            </div>
            {index < this.state.items.length - 1 ? <div className="row line"></div> : ''}
          </div>
        })}
       </div>
     )
   }
 }