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>

在React中使用setState更新对象

1 个答案: