Question

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

quiz_object : {
   'title': 'math questions', 
   'description': 'lots of text',
   'question': 'x + y =?', 
   'answer': '4!'
}

此组件用于编辑测验对象＆＃39;。修改字段名称＆＃39;和价值＆＃39;到更新功能。（例如：在将标题字段编辑为＆＃39;测试编辑时，＆＃39;名称＆＃39;将标题为＆＃39;。＆＃39;值＆＃39;将be＆＃39;测试编辑＆＃39;）

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

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

**注意：下划线适用于JavaScript中的变量名称：）

Answer 2

您可以使用spread-syntax quiz_object创建新的...来获取旧的对象属性并分配新的属性，然后使用该对象设置setState。

＆＃13;

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

＆＃13;

<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>

＆＃13;

React - 覆盖state.object值的一部分，同时保留旧值。

2 个答案: