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

要重新渲染单位列表，我们需要添加一个额外的道具“ extraData”

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

您可以获得完整的documentation here。

在我的情况下，我设置extraData = {this.state}，因为每个平面列表项中的按钮状态取决于父组件中存在的数组。因此，我已通过道具将其发送给子组件。

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

FlatList不会根据状态更改重新呈现

1 个答案: