複数の状態が返された状態のsetState

Question

setStateに複数の状態を渡すにはどうすればよいですか？ここでは例です：

getInitialState: function() { 
    return { 
    list: [], 
    newFilm: {}, 
    searchWord: '', 
    searchDetails: {} 
    } 
}, 

componentDidMount: function() { 
    this.setState({ 
    searchDetails:someData, 
    newFilm: 'I am first text', 
    }) 
} 

質問です：

は文法的に正しい例ですか？

Answer 1

状態を設定する方法には構文上の問題はありませんが、状態を初期化する方法に問題がある可能性があります。 newFilmをオブジェクト状態として初期化しましたが、状態を設定するときに文字列を与えています。だから、あなたはそれはあなたの

オブジェクトが反応子として有効ではありません、エラーがスローされます{this.state.newFilm}ようにそれをレンダリングしようとし（た：キーを持つオブジェクト{}）。

以下のスニペットからわかるように、最初にコンポーネントがレンダリングされるので、オブジェクトは後で唯一の文字列の後に表示されます。

この問題を解決するには、を''と設定してください。レンダリングしようとすると、つまりデータが含まれている場所を確認してからレンダリングするときに予防してください。

また、機能で定義されているsomeDataが表示されません。あなたはそれを使用する前にそれを定義する必要があります。あなたがそれを行う方法でしょう

var App = React.createClass({ 
 
    getInitialState: function() { 
 
    return { 
 
    list: [], 
 
    newFilm: {}, 
 
    searchWord: '', 
 
    searchDetails: {} 
 
    } 
 
}, 
 

 
componentDidMount: function() { 
 
    var someData = {'name': 'abc'}; 
 
    this.setState({ 
 
    searchDetails:someData, 
 
    newFilm: 'I am first text', 
 
    }) 
 
}, 
 
render: function() { 
 
    console.log(this.state.newFilm); 
 
    return (
 
    <div>{this.state.newFilm}</div> 
 
) 
 
} 
 
}) 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script> 
 
<div id="app"></div>