在React中使用setState更新对象

Question

如何将多个状态传递给setState？下面是一个示例：

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

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

问题是：

这个例子在语法上是否正确？

- Kirill Stas

---

那就是你该这么做。 - Kelly J Andrews

请查看此链接：https://dev59.com/PGAf5IYBdhLWcg3wOQcL - Piotr Berebecki

抱歉，Piotr，但这怎么能帮助我呢？ - Kirill Stas

我对问题进行了编辑，但那只是我认为你想要问的问题的宽泛解释。然而，目前发布的代码存在什么问题仍然不清楚。它是否无法正常工作？为什么？是否有错误？你现在面临的问题是什么？ - Tunaki

Answer 1

你设置state的语法没有问题，但你初始化state的方法可能有问题。你将newFilm初始化为一个对象，但是当你设置它的state时，你给了一个字符串。因此，如果你尝试像{this.state.newFilm}这样呈现它，它会抛出错误：

Objects are not valid as a React child (found: object with keys {}).

正如下面的代码段所示，由于组件第一次渲染时看到的是一个对象，而后来却只是一个字符串。

要解决这个问题，请尝试将你的state newFilm 初始化为''，或者在尝试呈现之前检查它是否包含一些数据，然后再进行呈现。

此外，我没有在你的componentDidMount函数中看到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>

- Shubham Khatri