保留重新渲染的狀態數據在reactjs

Question

我不能共享整個代碼，因爲它非常複雜。

該應用程序基本上是一個待辦事項列表任務中，我們可以添加的主要任務和對應的主要任務

結構的子任務是這樣的

Main task 1 
1. 
2. 
3. 

現在，我在我的JSON結構維護索引變量並把我的數據時到子組件作爲

this.state.Todo [指數] .items

現在我面臨的問題是

• 當我添加的第一個任務，即this.state.Todo [0] .items及其子任務，然後它工作正常

• 但是，如果我添加第二個任務this.state.Todo 1。項目然後子組件僅獲取第二個索引的數據和第一個子項的子任務，我之前添加的消息從頁面中消失。

  Main task 1 
  

  //消失

• 主要任務2

• 1.

• 2.

• 3.

我無法弄清楚如何解決這個問題

UPDATE：

這裏是我的JSON

{ 
Todo:[ 
{name:"primary", 
items:[ 
{ 
item:'', 
isDone:false, 
cost:0} 
      ] 
} 
], 
filter:[ 
{ 
keyword:'', 
Status:"SHOW_ALL" 
} 
], 
selectedCatelog:"0"}; 


**starting Component todoAdd.js** 

var React=require('react'); 
var ReactDOM=require('react-dom'); 
import TodoBanner from './TodoComponents/TodoBanner.js'; 
import TodoForm from './TodoComponents/TodoForm.js'; 
import TodoList from './TodoComponents/TodoList.js'; 
import TodoCost from './TodoComponents/TodoCost.js'; 


      var TodoApp = React.createClass({ 
      getInitialState : function(){ 
       return {Todo:[{name:"primary",items:[{item:'',isDone:false,cost:0} 
       ]}],filter:[{keyword:'',Status:"SHOW_ALL"}],selectedCatelog:"0"}; 
      }, 
      updateItems: function(newItem){ 

       var item = {item:newItem.item,isDone:false,cost:newItem.cost}; 

       var newtodo = this.state.Todo; 
       var allItems = this.state.Todo[this.state.selectedCatelog].items.concat([item]); 
       newtodo[this.state.selectedCatelog].items = allItems; 
       this.setState({ 
        Todo: newtodo 
       }); 

      }, 
      deleteItem : function(index){ 

       var newtodo = this.state.Todo; 
       var allItems = this.state.Todo[this.state.selectedCatelog].items.slice(); //copy array 
       allItems.splice(index, 1); //remove element 
       newtodo[this.state.selectedCatelog].items = allItems; 
       this.setState({ 
        Todo: newtodo 
       }); 
      }, 
      filterItem : function(e){ 

       this.state.filter[0].Status = e.target.value; 
       this.setState({ 
        filter: this.state.filter 
       }); 
      }, 
      searchItem : function(e){ 

       this.state.filter[0].keyword = e.target.value; 
       this.setState({ 
        filter: this.state.filter 
       }); 
      }, 
      AddCatalog: function(newCatalog){ 
       var Catalog = {name:newCatalog,items:[]}; 
       var newtodo = this.state.Todo.concat([Catalog]); 
       this.setState({ 
        Todo: newtodo 
       }); 
      }, 
      setID:function(index) 
      { 

      if(index-this.state.selectedCatelog===1) 
      { 
       this.setState({ 
        selectedCatelog: index 
       }); 

      } 

      }, 
      setSelectedCatalog: function(index){ 


      }, 
      setIndexItem:function(index) 
      { 

       this.setState({ 
        selectedCatelog: index 
       }); 
      }, 
      render: function(){ 


      console.log(JSON.stringify(this.state.Todo)) 




       const AppBarExampleIcon =() => (
     <AppBar title="Module Cost Estimation" /> 
    ); 
       return (
        <div> 
         <div> 
         <MuiThemeProvider> 
         <AppBarExampleIcon /> 
         </MuiThemeProvider> 

         <TodoCost cost={this.state.Todo}/> 
          <ToDoCatalogForm onFormSubmit = {this.AddCatalog} /> 
          <ToDoCatelog setItemId={this.setIndexItem} set={this.updateItems} onSelectDemo={this.setID} selectedID = {this.state.selectedCatelog} onSelected={this.setSelectedCatalog} Todos = {this.state.Todo} /> 

         </div> 
         <div> 

          <TodoList ListIndex={this.state.selectedCatelog} items = {this.state.Todo} filter = {this.state.filter} onDelete={this.deleteItem}/> 


          <ToDoFilter onFilter = {this.filterItem} onSearch = {this.searchItem} filter={this.state.filter}/> 

         </div> 
        </div> 
       ); 
      } 
     }); 
    ReactDOM.render(<TodoApp />, document.getElementById("app")); 

當我添加一個任務，它的名字獲取的name屬性添加Json和當我輸入子任務，然後子任務填充項目屬性corressponding的名稱和我正在更新索引使用selectedCatelog。每當添加新任務selectedCatelog是在setIndexItem方法更新，然後我通過整個JSON來TodoList的元器件

這裏是屏幕截圖之前加入第二主任務

這裏是截圖後加入第二主要任務

Answer 1

對於您給我們的少量信息，它看起來像問題正在更新狀態。

當您更新狀態成員時，用新的成員覆蓋該成員，因此必須先取得之前的信息並添加新成員。

此外，你不能直接改變像this.state.Todo.push(newTodo)這樣的狀態，所以作爲Todo數組，你應該使用像concat這樣的方法來添加一個新元素，因爲它返回一個新的數組。

const { Todo } = this.state; 
let newTodo = {"name":'sec',"items":[2,4,5,7]} 
this.setState({ Todo:Todo.concat([newTodo])});