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

Question

我的状态为数组：

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 ！

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

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

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 。