FlatList不会在状态更改时重新呈现

Question

按下按钮（ButtonComponent）时，按钮的状态会发生变化。现在我将这个状态传递给<FlatListItem>内的<FlatList>（儿童组件）。根据该状态，应重新安排<FlatList>中的每个项目。

我刚刚了解了这个extraData prop，但不知道如何在代码中使用它。

这不是什么新东西，但它就像简单的复选框实现。一切正常，但是当我按下全选按钮时，所有剩余的选择按钮都没有切换到选中状态。

class FlatListItem extends Component{  
  constructor(props){
    super(props)
    const{ isSelected }=this.props
    this.state={
        selectedStatus:isSelected,
    }
}

changeSelectStatus=(key)=>{
    this.setState({selectedStatus:!this.state.selectedStatus});
    return key;
}

render(){
    return(
        <View style={{flex:1,
            flexDirection:'row',
            backgroundColor:'white'}}>
            <View>
                <Image
                    source={{uri:this.props.item.imageUri}}
                    style={{width:50, height:50, margin:5}}>
                </Image>
            </View>
            <View>
                <Text style={{color:'black', padding:10, fontSize:16}}>{this.props.item.name}</Text>
            </View>
            <View style={{flex:1, alignItems:'flex-end', paddingRight:-10}}>
                {this.state.selectedStatus?
                    **<ButtonComponent buttonColor={"black"} buttonTextColor={"white"} fullRounded={true}
                    borderHighlight={true} buttonWidth={70} buttonHeight={30} 
                    onPress={()=>this.props.showSelected(this.changeSelectStatus(this.props.item.key)) }>
                        Selected
                    </ButtonComponent>
                :
                    <ButtonComponent buttonColor={"white"} buttonTextColor={"black"} fullRounded={true}
                    borderHighlight={true} buttonWidth={70} buttonHeight={30} 
                    onPress={()=>this.props.showSelected(this.changeSelectStatus(this.props.item.key)) }>
                        Select
                    </ButtonComponent>
                }                    
            </View>
        </View>
    )
 }

  }
export default class SelectMembersBody extends Component {
constructor(props){
    super(props)
    this.state={
        selectedButtons:[],
        selectAllBtnStatus:false,
    }
}
selectAllMembers=()=>{
    let allMembers=[];
    if(!this.state.selectAllBtnStatus){
        membersData.forEach(element => {
            if(!this.state.selectedButtons.includes(element.key))
                allMembers.push(element.key)                
        });
        this.setState({
            selectAllBtnStatus:!this.state.selectAllBtnStatus,
            selectedButtons:[...this.state.selectedButtons, allMembers]
        })
    }
    else{
        this.setState({
            selectAllBtnStatus:!this.state.selectAllBtnStatus,
            selectedButtons:[...allMembers]
        })
    }
}
showSelected=(callback)=>{
    let val = callback;
    if(!this.state.selectedButtons.includes(val))
        this.setState({selectedButtons:[...this.state.selectedButtons, val]});
    else{
        let newMarkers=[...this.state.selectedButtons]
        let index = newMarkers.indexOf(val);
        if (index >= 0) {
            newMarkers.splice( index, 1 );
        }
        this.setState({selectedButtons:newMarkers});
    }
}
render(){
    return(
        <View style={{flex:1, }}>
            <Text>{this.state.selectedButtons}</Text>
            <View>
                {this.state.selectAllBtnStatus?
                    <ButtonComponent buttonColor={"black"} buttonTextColor={"white"} fullRounded={true}
                        borderHighlight={true} buttonWidth={85} buttonHeight={30} onPress={this.selectAllMembers}>
                            Selected All
                    </ButtonComponent> 
                :
                    <ButtonComponent buttonColor={"white"} buttonTextColor={"black"} fullRounded={true}
                        borderHighlight={true} buttonWidth={85} buttonHeight={30} onPress={this.selectAllMembers}>
                            Select All
                    </ButtonComponent> }
            </View>                
            <FlatList data={membersData} extraData={this.state}
                renderItem={({item, index})=>{
                    return(
                        <View>
                            <FlatListItem item={item} index={index} isSelected={this.state.selectAllBtnStatus} showSelected={this.showSelected} ></FlatListItem>
                        </View>
                    )
                }
            }></FlatList>       
        </View>
    )
  }
}

Answer 1

我知道进入别人的鞋子是相当困难的。我在问题中提供的代码可能不那么有效，因为我是学习者。这就是为什么让代码流变得不舒服。所以，在阅读StackOverFlow上的一些文章，文档和类似问题后，我决定回答我自己的问题。

所以，我的问题是为什么平面列表没有在setState上重新渲染。更准确地说，如果您已经浏览了上面的图片，则在选择“全选”按钮时，项目中的所有按钮都应切换到选定状态。

为了使平面列表重新渲染，我们需要添加一个额外的道具“extraData”

通过将extraData = {this.state}传递给FlatList，我们确保当state.selected更改时，FlatList本身将重新呈现。如果不设置此prop，FlatList将不知道它需要重新渲染任何项目，因为它也是PureComponent，并且prop比较不会显示任何更改。

你可以得到它的完整documentation here。

在我的例子中，我设置extraData = {this.state}，因为每个flatlist项中的按钮状态取决于父组件中存在的数组。所以，我已经通过道具将它发送到子组件。

现在，平面列表工作正常，并在每次状态更新时重新呈现。