React Native：使用FlatList修改组件级别状态

Question

我的主要组件中有两个部分。一个部分包含FlatList，另一个部分显示FlatList接收的对象中的值的总和。我的主要组件如下：

return (
  <View>
  <FlatList
    data={[{a:1,b:2},{a:3,b:4}]}
    renderItem={({item})=><View>{item.a}</View>}
  />
  <View>**SUM OF a(i.e 1+3=4)**</View>
  </View>
)

我无法在第二个视图中显示所有a的总和。当我尝试使用this.setState({a: this.state.a + item.a})中的renderItem修改应用程序的内部状态时，出现错误。

我认为有用的另一种方法是循环遍历对象而根本不使用FlatList。但即使在这种情况下，我也无法在vanilla javascript的this.setState({a: this.state.a + item.a})函数中使用map。

例：

const arr = [{a:1,b:2},{a:3,b:4}]
arr.map(e=>{
  return this.setState({a: this.state.a + e.a})
})

我究竟做错了什么？

Answer 1

编辑：我意识到你试图总结所有的a元素，而不是修改数组中的所有元素。

你不能像你在setState尝试的那样使用map。首先，您永远不应该在render方法中调用它。每次调用可能导致错误的setState时都会导致重新渲染。

总结a属性做这样的事情：

sumA(newArray) {
  const newA = newArray.reduce((a, b) => a + b, this.state.a || 0 )

  this.setState({ a: newA });
}