Блог

Главная - Вопросы по программированию - Обновление вложенного объекта состояния реакции новым произвольным объектом

Обновление вложенного объекта состояния реакции новым произвольным объектом

#reactjs

#reactjs

Вопрос:

Как я могу обновить значение в объекте состояния реакции, если это значение является объектом? Пример:

 this.state = { nestedObj: { x: 0, y: 5 } };

позже я хочу обновить этот nestedObj произвольным объектом, основанным на объекте, созданном на JSON.parse основе пользовательского ввода.

Я пробую следующее, и это не работает:

 const newObj = {nestedObj: { x: 0, arbitraryKey: 'bla', anotherOne: { h: 0 }}};
this.setState(newObj);

Я бы очень хотел просто удалить любой объект, в котором он находится, this.state.nestedObj и заменить его любым объектом, в котором он определен newObj . Как я могу это сделать? У меня есть другие ключи в моем this.state , так что было бы идеально, если бы это повлияло только nestedObj на, но я не очень придирчивый.
Спасибо!

Комментарии:

1. вы пробовали this.setState({nestedObj: newObj}) ?

Ответ №1:

 class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      obj: {a: 'hello', b: 'world'}
    };
  }
	
  componentDidMount() {
    console.log('obj is initialized to: ', this.state.obj);
  }
	
  handleClick = () => {
	const value = Math.random().toFixed(2);
	this.setState({
		obj: {a: value, b: value}
	}, () => console.log('obj is changed to: ', this.state.obj));
  };

  render() {
	return <button onClick={this.handleClick}>button</button>
  }
}

ReactDOM.render(
	<Main />, 
	document.getElementById('root')
);  
 <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>