在React中使用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}它会给你一个错误

对象作为React子对象无效(找到:具有键{}的对象).

正如你在下面的代码片段中看到的那样,因为第一次渲染组件时它会看到一个对象,后面只有一个字符串.

要解决这个问题尝试初始化你的国家,newFilm作为''或采取预防,当您尝试呈现,即检查它包含了一些数据,然后只渲染.

我也没有someData在你的componentDidMount功能中看到定义.您需要先定义它,然后才能使用它.

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>