React Native设置状态对象数组的元素答案

【问题标题】：React Native set state an element of array of objectsReact Native设置状态对象数组的元素
【发布时间】：2019-01-16 09:59:48
【问题描述】：

我的状态中有一个数组：

this.state = {
  data: [
    {
      quantity: 0
    }
  ],
  tempQuantity: 0
};

我想在TextInput 中更新我的data[0].quantity，所以我使用：

onChangeText={tempQuantity =>
  this.setState({
    tempQuantity,
    data: [...this.state.data, { quantity: tempQuantity }]
  })
}

我有一个<Text> 来显示结果：

<View>
  <Text>{this.state.data[0].quantity}</Text>
</View>

但我每次都收到0！

如何更新数组中每个对象的每个元素？
如果我这样使用它，它会动态工作吗？我的意思是我想在每次按下<Button> 时创建一个对象（具有主对象的所有属性）。 [例如：data[0] 与 quantity 的 10 - data[1] withquantity` 的 12 - 和 ...]

【问题讨论】：

您在每个onChangeText 上向data 添加一个新对象。
如果您在data 数组中只有一个对象，那么您正在向数组中添加一个新对象，那么为什么不将其作为单独的属性添加到状态中而不是数据数组中的对象。跨度>
@Tholle 那么我该如何以正确的方式做到这一点？
@Sandip 它被简化了——我有大约 15 个属性
@MohamadKh75 你能在这里查看我的答案吗stackoverflow.com/a/51758734/1904377。

标签： javascript arrays reactjs react-native ecmascript-6

【解决方案1】：

要对数组中的每个元素使用单个事件处理程序，您可以传入 index 和 event 并为该特定索引上的元素更新 quantity。

示例

class App extends React.Component {
  state = {
    data: [
      {
        quantity: 0
      },
      {
        quantity: 10
      },
      {
        quantity: 100
      }
    ]
  };

  handleChange = (event, index) => {
    const { value } = event.target;

    this.setState(previousState => {
      const data = [...previousState.data];

      data[index] = {...data[index], quantity: value };

      return { data };
    });
  };

  render() {
    return (
      <div>
        {this.state.data.map((element, index) => (
          <div key={index}>
            <input
              type="number"
              value={element.quantity}
              onChange={event => this.handleChange(event, index)}
            />
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<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="root"></div>

【讨论】：

【解决方案2】：

您必须先修改您的data 数组，然后才能将其设置为状态。您可以通过以下方式进行操作：

假设您有一个包含以下项目的数组：

var data = [
{name: 'a', age: 12},
{name: 'b', age: 15}
]

在设置为state之前需要修改一下，方法如下：

var newData = data.map((item) => {
return {...item, age: 20}
})

现在你的newData 将是

var newData = [
{name: 'a', age: 20},
{name: 'b', age: 20}
]

这个newData可以分配给state。

【讨论】：

这是问题 1 的答案？那么如何将新对象添加到我的数组中？我希望这是动态的...（问题 2）
我想编辑 object[x] 的年龄，而不是全部更改为 20！
@MohamadKh75 如果要更新对象[x]，则需要直接在该索引处更新它。喜欢object[x].age = newValue。
@MohamadKh75 回答你的问题So how can I add new object to my array? 无论你做什么都很好，它会将新对象添加到现有状态数组中。