FlatList 不动态呈现样式

Question

我目前正在努力使我的 FlatList 应用我所做的更改。我现在想要的是，当我单击平面列表中的一个项目时，它会以某种颜色突出显示。我遵循了 guy 完成的方法，但我遇到的问题是，一旦我单击，我就无法进行更新。

我可以通过控制台看到我所做的一切都在执行修改，但我认为我遗漏了 extraData 参数的一些要点，因为它没有使用我想要应用的 backgroundColor 重新渲染。

我的代码如下，我知道我应用的样式是正确的，因为如果我在地图 styles.list 中替换每个 styles.selected，一切都会得到我想要的背景应用于我点击的元素。

所以总结一下，我认为我遇到的问题是平面列表没有重新渲染，所以它没有显示我对其执行的修改。知道我做错了什么吗？有什么建议吗？

 render() {

  const { students, studentsDataSource, loading, userProfile } = this.props.navigation.state.params.store;

  this.state.dataSource = studentsDataSource._dataBlob.s1.map(item => {
    item.isSelect = false;
    item.selectedClass = styles.list;
    return item;
  })
  const itemNumber = this.state.dataSource.filter(item => item.isSelect).length;
  return (
    <View style={styles.container}>
        <Item rounded style={styles.searchBar}>
          <Input placeholder='Group Name'/>
        </Item>
        <FlatList
          style={{
            flex: 1,
            width: "100%",
          }}
          data={this.state.dataSource}
          ItemSeparatorComponent={this.FlatListItemSeparator}
          renderItem={ ({ item }) => (
              <ListItem avatar style={[styles.list, item.selectedClass]}
                onPress={() => this.selectItem(item)}>  
                  <Left>
                    {!item.voteCount &&  <Avatar unseen={true} /> }
                    {!!item.voteCount > 0 && <Avatar />}
                  </Left>
                  <Body>
                      <Text>{item.name}</Text>
                      <Text note>{item.group}</Text>
                  </Body>
              </ListItem>
            )
          }
          listKey={item => item.key}
          extraData={this.state}
        />
   </View>
  );
}

在这里我们可以找到state和SelectItem函数：

    constructor(props) {
        super(props)
        this.state = {
            dataSource : [],
        }
    }

    //FlatListItemSeparator = () => <View style={styles.line} />;
    selectItem = data => {
      //{console.log("inside SelectItem=", data)}
      data.isSelect = !data.isSelect;
      data.selectedClass = data.isSelect? styles.selected: styles.list;
      const index = this.state.dataSource.findIndex( item => data.key === item.key);
      this.state.dataSource[index] = data;
      this.setState({
          dataSource: this.state.dataSource,
      });
      console.log("This state has the changes:=",this.state.dataSource)
    };

Answer 1

好吧，主要问题是我没有使用 .setState，而是在做赋值，这会杀死听众。

FlatList 不动态呈现样式

FlatList not rendering style dynamically

react-native

native-base

react-native-flatlist