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;

來源

2016-07-24 Pirzada

在某些級別，你必須使用狀態。 –

如果您在樹的任何位置使用狀態，即使您的組件會以道具形式通過狀態，它們也會重新渲染。 – Toby

應該通過狀態處理內部數據更改（在您的情況下onAdd事件）以重新呈現組件。 –

道具只有在目的REACT爲將數據從父組件，以通知他們狀態已經改變傳遞給孩子們。
您必須保持狀態，因爲這是控制應用程序組件並保持狀態完整性的正確React方法。
不知道爲什麼您更喜歡props而不是state，因爲無論如何您都必須將數據存儲在某處，但只要您添加的組件越來越多，使用forceUpdate（）提供的解決方案就會使您的應用狀態不一致。

來源

2016-07-24 21:33:09

React.js：添加重新渲染組件數據

回答

相關問題