保留重新渲染的状态数据在reactjs
问题描述:
我不能共享整个代码,因为它非常复杂。保留重新渲染的状态数据在reactjs
该应用程序基本上是一个待办事项列表任务中,我们可以添加的主要任务和对应的主要任务
结构的子任务是这样的
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的元器件
这里是屏幕截图之前加入第二主任务
答
对于您给我们的少量信息,它看起来像问题正在更新状态。
当您更新状态成员时,用新的成员覆盖该成员,因此必须先取得之前的信息并添加新成员。
此外,你不能直接改变像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])});
如果您可以发布更多的代码,那将是非常好的,因为从提供的描述中,您不太清楚如何使用索引变量以及如何收取状态。 – Grandas
@Grandas有一点。这听起来像是一个来自状态操纵的问题,用新的状态覆盖你当前的状态。关于这些变化如何发生的一些细节将会有很大的帮助。 – Gegenwind
我已更新问题。请帮助 –