Question

我目前正在努力将自己所做的更改应用到FlatList中。我现在想要的是，当我单击清单中的某个项目时，该项目以某种颜色突出显示。我遵循的是guy完成的方法，但是我遇到的问题是，单击鼠标后我无法使用更新。

我可以通过控制台看到我所做的所有操作都进行了修改，但是我认为我缺少了extraData参数，因为它没有使用我想应用的backgroundColor重新渲染。

我拥有的代码如下，我知道我要应用的样式是正确的，因为如果我将map 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无法动态呈现样式

1 个答案: