陣營組件不設置狀態

我有一個看起來像這樣的組件做出反應來表示任務列表，稱爲<Tasks>：陣營組件不設置狀態

var Tasks = React.createClass({ 
    getInitialState: function() { 
     return { 
      tasks: [] 
     }; 
    }, 
    componentDidMount: function() { 
     this.setState({ 
      tasks: this.props.tasks 
     }); 
    }, 
    render: function() { 
     var tasks = this.state.tasks.map(function (task) { 
      return (
       <Task key={task.id} description={task.description} completed={task.completed} /> 
      ); 
     }); 
     return (
      <table className="table table-tasks"> 
       <tbody> 
        {tasks} 
       </tbody> 
      </table> 
     ); 
    } 
});

但this.state.tasks沒有被設置。使用Chrome的React檢查器，我可以看到this.props.tasks是兩個對象（預期）的數組，但this.state.tasks是一個空數組。所以看起來setState調用我的componentDidMount方法實際上並沒有設置狀態。

我在做什麼錯？

來源

2016-01-15 Martin Bean

當我複製它並自己嘗試時，您的代碼工作得很好，因此您必須在別處查找問題。所提供的示例沒有任何問題。 –

您確定要保留「任務」狀態的副本嗎？（其實，它甚至沒有被複制）。這帶來的弊大於利...... – Andreyco

@Andreyco那麼我的組件代表了一個可以添加，編輯或刪除的任務列表，所以這就是操縱任務的狀態，是的。 –

原來我可以在getInitialState()中訪問props。不知道從哪裏我拿起在componentDidUpdate()設置狀態的慣例，所以現在我只是在做：

var Tasks = React.createClass({ 
    getInitialState: function() { 
     this.setState({ 
      tasks: this.props.tasks 
     }); 
    }, 
    render: function() { 
     var tasks = this.state.tasks.map(function (task) { 
      return (
       <Task key={task.id} description={task.description} completed={task.completed} /> 
      ); 
     }); 
     return (
      <table className="table table-tasks"> 
       <tbody> 
        {tasks} 
       </tbody> 
      </table> 
     ); 
    } 
});

感謝傑克·富蘭克林的tip！

來源

2016-01-15 13:44:59

陣營組件不設置狀態

回答

相關問題