在 React Native 中将新的键/值添加到对象中答案

【问题标题】：Add new Key/Value into Object in React Native在 React Native 中将新的键/值添加到对象中
【发布时间】：2019-03-03 10:08:18
【问题描述】：

我正在开发一个 React Native 项目。现在，我正在一个对象中添加新的键/值。

它正在工作，但我想知道是否有更好的方法或者您有什么建议。

我还是 ReactJS/React Native 的新手，并不是 100% 的 Javascript 技能。所以这是我的代码：

我的对象

state = {
    result : {
        "q1":1
    }
}

我的函数添加键/值并修改result的状态：

_getValue = (id, value) => {

    var newObj = this.state.result;
        newObj[id] = parseInt(value);

    this.setState({
        result: newObj
    }, () => {
        console.log(this.state.result)
    })
}

谢谢！

【问题讨论】：

你做的很好。我建议的唯一更改是将 var 更改为 const :) 和 this.state.result;将状态分配为 const { result } = this.state;而不是每次都调用 this.state
它不是 - 他在调用 setState 之前直接改变 state.result ，这不是同步的。它可能导致难以捕捉的意外错误。
@Dimitar 他正在向现有对象添加新的键和值。不是吗？这有什么问题？
reactjs.org/docs/react-component.html#state - 问题还在于（可能）因为在排队的setState() 更改生效之前，同时有其他东西可能导致渲染（reactjs.org/docs/react-component.html#setstate - 它显示了它可能不会这样做立即，将其批量处理，以备后用）。因此应用程序的其他部分可能会在它们应该之前获得更改的值。可以使用const result = Object.assign({}, this.state.result); 来避免直接对其进行变异（或传播）。
@Think-Twice 他改变了现有对象的位置，改变了，但替换了不变的部分，没有改变。这是没有意义的。并且 setState 应该是不可变的更新。

标签： javascript reactjs object react-native add

【解决方案1】：

这应该可以正常工作。

this.setState({
  result: {
     ...this.state.result,
     [id]: value
  }
});

它使用现代/新功能，例如对象传播 (...this.state.result) 和动态对象属性 ([id]: value)

【讨论】：

谢谢！我得到了关于不可变状态的信息。我不知道我为什么这样做......我在另一个组件中做了正确的事情，但我完全忘记了:-)