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＆＃39; 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 });
}

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

1 个答案: