在React中使用setState更新对象 [英] updating objects with setState in React

问题描述

如何将多个状态传递给 setState ？这是一个例子：

  getInitialState：function（）{
 return {
 list：[]，
 newFilm：{}，
 searchWord：''，
 searchDetails：{} 
} 
}，
 
 componentDidMount：function（）{ 
 this.setState（{
 searchDetails：someData，
 newFilm：'我是第一个文字'，
}）
} 
  

问题是：

示例语法是否正确？

解决方案

设置状态的方式没有语法问题，但初始化方式可能有问题你说。您已将newFilm初始化为对象状态，但在设置其状态时，您将给出一个字符串。因此，假设您尝试将其呈现为 {this.state.newFilm} 它会引发错误

$ blockquote>

对象无效作为React子对象（找到：具有键{}的对象）。

尽可能请参阅下面的代码段，因为第一次呈现组件时，它会看到一个对象，后面只有一个字符串。

要解决此问题，请尝试初始化状态 newFilm as ''或在尝试渲染时采取预防措施，即检查包含某些数据的位置，然后仅渲染。

此外，我没有在 componentDidMount 函数中定义 someData 。您需要先定义它才能使用它。

  var App = React .createClass（{getInitialState：function（）{return {list：[]，newFilm：{}，searchWord：''，searchDetails：{}}}，componentDidMount：function（）{var someData = {'name'：'abc '}; this.setState（{searchDetails：someData，newFilm：'我是第一个文本'，}）}，render：function（）{console.log（this.state.newFilm）; return（< div> {this .state.newFilm}< / div>）}}）ReactDOM.render（< App />，document.getElementById（'app'））;  

< pre class =snippet-code-html lang-html prettyprint-override> < 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>

How can I pass multiple states to setState? Here's an example:

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

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

The question is:

Is the example syntactically correct ?

解决方案

There is no syntax problem with the way you are setting state, but there could be a problem with the way you are initialising you state. You have initialized newFilm as an object state but when you set its state you are giving a string. So suppose you try to render it like {this.state.newFilm} it will throw you an error

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

as you can see in the snippet below, since the first time the component is rendered it sees an object where later its only a string.

To fix this try initializing you state newFilm as '' or take prevention when you try to render i.e. check where it contains some data and then only render.

Also I don't see someData defined in your componentDidMount function. You need to define it before you can use it.

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更新对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！