React.js：添加重新渲染组件数据

问题描述：

新对象添加正确，并获取更新数据的新Todos。在渲染函数中，我得到了this.props.todoList这是要显示的对象数组。React.js：添加重新渲染组件数据

如何使用newTodos更新todoList以显示此新数据？

我可以做到这一点与setState({todoList: newTodos})和渲染功能得到this.state.todoList等，但我不想保持大对象（在未来）的状态。相反，我想使用道具。

有什么建议吗？

var React = require('react'); 

var TodoList = require('./todo-list.js'); 

var App = React.createClass({ 
    getInitialState: function() { 
     return { filter: 'active' }; 
    }, 
    onAdd: function (txt, color) { 
     console.log('txt: ' + txt + ', color: ' + color); 
     var newTodos = this.props.todoList.push(Map({ txt: txt, isCompleted: false, color: color })); 

     this.forceUpdate(); 
     // this.setState(this.state); 
    }, 
    render: function() { 
     var { todoList } = this.props; 
     return (
      <div> 
       <TodoList todoList={todoList}/> 
      </div> 
     ); 
    } 
}); 


module.exports = App;

在某些级别，你必须使用状态。 –

如果您在树的任何位置使用状态，即使您的组件会以道具形式通过状态，它们也会重新渲染。 – Toby

应该通过状态处理内部数据更改（在您的情况下onAdd事件）以重新呈现组件。 –

答

道具只有在目的REACT为将数据从父组件，以通知他们状态已经改变传递给孩子们。
您必须保持状态，因为这是控制应用程序组件并保持状态完整性的正确React方法。
不知道为什么您更喜欢props而不是state，因为无论如何您都必须将数据存储在某处，但只要您添加的组件越来越多，使用forceUpdate（）提供的解决方案就会使您的应用状态不一致。

React.js：添加重新渲染组件数据

相关推荐