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

Question

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

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, но я не слишком придирчив. Спасибо!

Answer 1

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

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

 
ReactDOM.render(
 
\t <Main />, 
 
\t 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>