保留重新渲染的状态数据在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])});