Question

我必须提供一个我喜欢/不喜欢的名字列表。我的数据是对象{name: 'Artur'}的列表，我从API接收到该数据，并与存储在“ AsyncStorage”中的数据合并，从而成为{name: 'Artur', isFavorite: true}。基于isFavorite，我绘制了心脏图标。当用户“不喜欢”一个名称时，我更新了“ AsyncStorage”中的数据，但也想更新取消涂漆的心。我看到console.log('favorite')和console.log('unfavorite')，但图标没有变化。可能是什么问题，我该如何解决？

renderItem = ({ item }) => {
  return (
    <View>
      <Text>{item.name}</Text>
      <TouchableOpacity
        onPress={async () => {
          const { gender } = this.props;
          if (item.isFavorite) {
            item.isFavorite = false;
            await this.unfavoriteName(gender, item);

            console.log('unfavorite');
          } else {
            item.isFavorite = true;
            await this.favoriteName(gender, item);

            console.log('favorite');
          }
        }}>
        <Icon.Ionicons
          name={`heart${item.isFavorite ? '' : '-outline'}`}
        />
      </TouchableOpacity>
    </View>
  );
};

render() {
  return (
    <SectionList
      renderItem={this.renderItem}
      sections={[
        {title: 'Title1', data: [{name: 'Artur', isFavorite: true}, {name: 'Sveta', isFavorite: false}]},
        {title: 'Rafael', data: [{name: 'Bob', isFavorite: false}, {name: 'item4', isFavorite: true}]}
      ]}
      keyExtractor={item => item.id}
    />
  );
}

Answer 1

好像您没有使用setState()，只是在突变prop。您应该有一个状态，然后使用setState()告诉React什么时候该重新安装该组件。

在renderItem内更改项目不会显示更改

1 个答案: