Question

我正在绘制一个基于健身的统计信息列表，例如卡路里和碳水化合物等。平面列表由宏名称及其当前值组成。我希望当任何宏的值更改时重新呈现平面列表。我知道我可以用state来做到这一点，但是在这种情况下，平面列表呈现的是宏对象，用户可以创建更多/删除当前对象的宏对象，因此我不确定在更改数据后如何重新呈现平面列表。

宏对象：

class macroCards{  
  numMacros = 0

  constructor(title,unit){
      this.title = title;
      this.unit = unit;
      this.total = 0;
      this.key = uuid()
  }

  addTotal(val){
    this.total = this.total + val
    return this.total
  }

  resetTotal(){
    this.total = 0
  }
}

Flatlist（卡片内容是我使用item.total等提取数据的位置）：

<FlatList 
    data = {Macros}
    renderItem = {({ item }) => (
    <TouchableOpacity onPress = {this.toggleModal}>
       <Card style = {{justifyContent: 'center', margin: 1, backgroundColor: '#ffff', borderRadius: 25}}>
          <Card.Content>
             <View style = {{flexDirection: 'row', justifyContent: 'space-between'}}>
             <View style = {{flexDirection: 'column', justifyContent: 'space-between'}}>
             <Title style = {{paddingTop: 20, fontSize: 35, fontWeight: 'bold',color: 'black', letterSpacing: 2}}>{item.total} {item.unit}</Title>
             <Text style= {{fontSize: 30, color: 'black', letterSpacing: 2, fontWeight: '100'}}>{item.title}</Text>
             </View>
                <MainProgress/>
             </View> 
             </Card.Content>
             <Card.Actions>
            </Card.Actions>
           </Card>
        </TouchableOpacity>
      )}
   keyExtractor = {item => item.key}
/>

当项目从动态对象派生时，如何根据值更改重新呈现平面列表的项目

0 个答案: