假设我在组件状态中保存了以下对象：
quiz_object : {
'title': 'math questions',
'description': 'lots of text',
'question': 'x + y =?',
'answer': '4!'
}
该组件用于编辑“quiz_objects”。编辑字段将“名称”和“值”传递给更新函数。（例如：将标题字段编辑为“测试编辑”时，“名称”将为“标题”。“值”为“测试编辑”）
this.setState ((prevState) =>({
['quiz_object']: {[name]: value}
}));
上面的代码正确设置了新标题，但似乎覆盖了整个旧对象，使我处于以下状态：
quiz_object: {
'title': 'Test edit',
}
有没有办法在保留旧数据的同时对（嵌套）状态对象进行部分编辑？
提前致谢！
您可以传播（或Object.assign）现有值：
this.setState ((prevState) =>({
quiz_object: { ...prevState.quiz_object, [name]: value }
}));
使用Object.assign（如果你不能使用对象传播，请使用它）：
this.setState ((prevState) =>({
quiz_object: Object.assign(prevState.quiz_object, {[name]: value})
}));
但是，您也可以只发送对象，在这种情况下无需使用更新器功能：
this.setState({ quiz_object: { ...this.state.quiz_object, [name]: value} });
所以上面的代码将保留仅更改的quiz_object属性。state[name]
**注意：JavaScript 中的变量名可以使用下划线 :)
您可以quiz_object使用扩展语法创建新...对象以获取旧对象属性并分配新对象，然后使用该对象设置状态。
class A extends React.Component {
constructor(props) {
super(props);
this.state = {
quiz_object: {
'title': 'math questions',
'description': 'lots of text',
'question': 'x + y =?',
'answer': '4!'
}
}
}
componentDidMount() {
let newObj = { ...this.state.quiz_object, title: 'Test edit'}
this.setState({quiz_object: newObj})
}
render() {
console.log(JSON.stringify(this.state, 0, 4))
return null;
}
}
ReactDOM.render(
<A /> ,
document.getElementById('container')
);<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>
<div id="container"></div>