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！

如何更新数组中每个对象的每个元素？
如果以这种方式使用它，它将动态地工作吗？我的意思是每次按下<Button>时都想创建一个对象（具有主要对象的所有属性）。 [例如：data[0]，其中quantity为10-data[1] with的数量为12，并且...]

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

Answer 2

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

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

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

您需要先进行修改，然后才能通过以下方式重新设置状态：

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

现在您的newData将

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

可以将此newData分配给state。

React Native set state一个对象数组的元素

2 个答案: