Question

当该值是对象时，如何更新react状态对象中的值？例如：

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

稍后，我想基于根据用户输入从JSON.parse创建的对象，使用任意对象更新nestedObj。

我尝试以下操作但不起作用：

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'}
    };
  }
	
  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>

使用新的任意对象更新嵌套的反应状态对象

1 个答案: