Question

我无法分享整个代码，因为它非常复杂。

该应用程序基本上是一个待办事项列表任务，我们可以在其中添加与主要任务相对应的主要任务和子任务

结构就像这样

Main task 1  
1.
2.
3.

现在我在我的json结构中维护一个索引变量，并将我的数据作为

发送到子组件

this.state.Todo [指数] .items

现在我遇到的问题是

当我添加第一个任务，即 this.state.Todo [0] .items 及其子任务时，它可以正常工作
但是，如果我添加第二个任务 this.state.Todo 1。items ，那么子组件只获取第二个索引的数据，我之前添加的第一个子任务的子任务消失从页面。
```
Main task 1  
```
//消失
主要任务2
1
2
3

我无法弄清楚如何解决这个问题

更新

这是我的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"));

当我添加一个任务时，它的名字会被添加到Json的name属性中，当我输入子任务时，子任务将填充在属性中，并且使用 selectedCatelog 来更新索引.Whenever添加了一个新任务 selectedCatelog 在 setIndexItem 方法中更新，然后我将整个json传递给 TodoList 组件

以下是之前的屏幕截图添加第二个主要任务

以下是添加第二个主要任务后的屏幕截图

Answer 1

对于您提供给我们的少数信息，问题似乎是更新状态。

当您更新州的成员时，用新的成员覆盖该成员，因此您必须获取之前的信息并添加新信息。

此外，你不能像import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] fig = plt.figure() ax1 = fig.add_subplot(2,3,1) ax1.scatter(x, y) ax2 = fig.add_subplot(2,3,2) ax2.scatter(x, y) ax3 = fig.add_subplot(2,3,3) ax3.scatter(x, y) ax4 = fig.add_subplot(2,3,4) ax4.scatter(x, y) ax5 = fig.add_subplot(2,3,5) ax5.scatter(x, y) ax6 = fig.add_subplot(2,3,6) ax6.scatter(x, y) plt.show()那样直接改变状态，所以作为一个数组Todo你应该使用像concat这样的方法来添加一个新的元素，因为它返回一个新的数组。

this.state.Todo.push(newTodo)

在reactjs中保留重新渲染的状态数据

1 个答案: