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

Question

按下按钮 (ButtonComponent) 时，按钮的状态会发生变化。现在我将该状态传递给 <FlatListItem> (一个子组件)里面 <FlatList> .根据该状态，<FlatList> 中的每个项目应该重新安排。

我刚刚了解这个 extraData 属性，但不确定如何在代码中使用它。

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

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 上重新呈现。更准确地说，如果您浏览了上面的图片，则在选择“全选”按钮时，项目中的所有按钮都应切换为选中状态。

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

By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

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

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

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