2017-02-27 15 views
1

的更新後,我的狀態是這樣的:React.js - 再拉深陣列項目

this.state = { 
    items = [] 
} 

狀態從REST服務,該服務工作正常加載。 但是後來,在國家項目的用戶編輯之一,我用永恆幫手更新狀態:

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

這會不會重新drawed(渲染方法會過去,但沒有明顯的變化是頁面上進行)我知道爲什麼:

因爲我創建陣列來呈現這樣的:

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

} 

如果我不能編輯渲染項的方法,有沒有什麼解決方案,我可以做這樣的項目將重新呈現上更新?只有我想到的是創建包裝組件。

+0

您是否嘗試調用'forceUpdate()'? – mguijarr

回答

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

不知何故,這有助於 –

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

} 

應該atcrender第6行,其實是itemsrender?或者在這個文件的其他地方有代碼可以揭示更多關於你爲什麼以這種方式完成的事情?