React - 覆盖 state.object 的部分值，同时保留旧值。 [复制]

Question

假设我在组件状态中保存了以下对象：

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

有没有办法在保留旧数据的同时对（嵌套的）状态对象进行部分编辑？

提前致谢！

Answer 1

您可以传播（或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} });

因此，上述代码将保留state 上的quiz_object 属性，仅更改[name]。

**注意：JavaScript 中的变量名可以使用下划线 :)

Answer 2

您可以使用扩展语法... 创建新的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>