Подтвердить что ты не робот

обновление объектов с помощью setState в React

Как передать несколько состояний в setState? Вот пример:

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

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

Вопрос в том:

Является ли пример синтаксически правильным?

4b9b3361

Ответ 1

Синтаксическая проблема не связана с настройкой состояния, но может возникнуть проблема с тем, как вы инициализируете состояние. Вы инициализировали newFilm как состояние объекта, но когда вы устанавливаете его состояние, вы даете строку. Поэтому предположим, что вы попытаетесь сделать это как {this.state.newFilm} это вызовет ошибку

Объекты недействительны в качестве дочернего элемента React (найдено: объект с ключами {}).

как вы можете видеть в приведенном ниже фрагменте, так как первый раз, когда компонент визуализируется, он видит объект, где позже его единственная строка.

Чтобы исправить эту попытку инициализации, вы указываете newFilm как '' или принимаете предупреждение, когда пытаетесь выполнить рендеринг, т. newFilm Проверяете, где он содержит некоторые данные, а затем только render.

Также я не вижу 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>