Question

我的状态如下：

this.state = {
  items = []
}

状态是从REST服务加载的，它正常工作。但是后来，当用户编辑状态中的一个项目时，我使用immutability helper来更新状态：

 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方法的返回永远不会改变。

您也可以通过映射状态重新编写它，这可能会让您更容易看到最新情况。

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

Answer 2

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>
  );

}

第6行的atcrender实际上应该是itemsrender吗？或者这个文件中的其他地方是否有代码可以揭示更多关于你为什么这样做的事情？

React.js - 更新项

2 个答案: