javascript - React Native 设置对象数组的元素状态

Question

我的状态有一个数组:

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

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

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

我有一个<Text>显示结果:

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

但是我得到0每次!

1. 如何更新数组中每个对象的每个元素？

2. 如果我这样使用它，它会动态工作吗？我的意思是我想在每次按 <Button> 时创建一个对象(具有主对象的所有属性) 。 [例如:data[0]与 quantity共 10 个 - data[1] with数量`12 - 和...]

Answer 1

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

示例

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>