在將prop轉移到那里之后如何重新渲染React Native組件

Question

我正在嘗試通過用戶名搜索來實現用戶列表。

在父組件SearchPeopleScreen更改prop usernameFilter SearchPeopleScreen其傳遞給子SearchListOfUsers之后，我遇到了重新呈現SearchListOfUsers的問題。

我知道一個組件應該在其state更改時重新呈現自己，但就我而言，即使子組件的狀態也不會更改。 如何更新我的孩子補償。 我通過prop的usernameFilter之后的SearchListOfUsers嗎？

這是我父母的禮物。 SearchPeopleScreen ：

export default class SearchPeopleScreen extends Component {

constructor(props) {
    super(props);
    this.state = {
        ...
        usernameFilter: ''
    }
}

render() {
    return(
        <Container>

            <Header style = {searchPeopleScreenStyle.header} searchBar>
                <Title style = {searchPeopleScreenStyle.title}>
                    Search
                </Title>

                <Right/> 
                <Item style = {searchPeopleScreenStyle.searchFieldWrapper}>
                     <IconSimpleLine name = 'magnifier' color = {placeholder} size = {20} style = {{padding: 10}}/>
                     <TextInput 
                               underlineColorAndroid = 'transparent'
                               onChangeText = {(text) => {
                                  this.setState({usernameFilter: text});
                               }}
                               placeholder = 'Type username'
                               style = {searchPeopleScreenStyle.searchInput}
                                    maxLength = {15}
                       />
                 </Item>

            </Header>

            <Content>
                <ScrollView contentContainerStyle = {searchPeopleScreenStyle.container}>

                    ...

                    {/* Search screen's body */}
                    <SearchListOfUsers searchOption = {this.state.searchOption}
                                        usernameFilter = {this.state.usernameFilter}/>

                </ScrollView>
            </Content>

        </Container>
    )
}
}

這是我的孩子。 SearchListOfUsers ：

export default class SearchListOfUsers extends Component {

constructor(props) {
    super(props);

    this.state = {
        usersDataArray: [],
        usernameFilter: this.props.usernameFilter
    };

    this.arrayHolder = [];
    console.warn('1 - ' + this.state.usernameFilter)
}

componentDidMount() {
    this.getAllUsersData()

    console.warn(this.state.usernameFilter)

    if(this.state.usernameFilter) {
        this.filterUsers();
    }
}

getAllUsersData = () => {
    return new Promise((resolve, reject) => {
        // getting users data and creating an array 
        ...
        allUsersDataArray.push({...});

        this.setState({
            usersDataArray: allUsersDataArray
        });

        resolve();
    })
}

filterUsers = () => {
    const newUsersDataArray = this.arrayHolder.filter((user) => {
        const usernameInTheList = user.userUsername.toUpperCase();
        const inputtedUsername = this.state.usernameFilter.toUpperCase();
        return usernameInTheList.includes(inputtedUsername);
    });

    this.setState({
        usersDataArray: newUsersDataArray
    })
}

render() {
    return(
          <Content contentContainerStyle = {searchPeopleScreenStyle.listOfUsersWrapperGlobal}>
                <FlatList
                    data = {this.state.usersDataArray}
                    keyExtractor = {(item) => (item.userId)}
                    renderItem = {({item}) => (
                        <UserListItem
                                        country = {item.userCountry}
                                        username = {item.userUsername}
                                        ...
                        />
                    )}
                />
            </Content>
        )
    }
}
}

Answer 1

如果您需要根據來自父組件的選擇來過濾數據，那么您也應該在那里過濾集合。 過濾完集合后，應將其傳遞給子組件。

在這種情況下，子組件應該純粹是表示形式的並且是靜態的。 它不關心過濾數據或更新其組件狀態等，它只想呈現傳遞的任何道具。 searchOption，usernameFilter，dataCollection

Answer 2

您可以在componentDidMount lifecyle方法中篩選用戶，這意味着它將僅在子組件的安裝過程中運行一次。

您可以過濾渲染方法，例如

filterUsers = () => {
    if(!this.props.usernameFilter.length) return this.state.usersDataArray

    return this.state.usersDataArray.map((user) => {
        const usernameInTheList = user.userUsername.toUpperCase();
        const inputtedUsername = this.props.usernameFilter.toUpperCase();
        return usernameInTheList.includes(inputtedUsername);
    });
}

render() {
    return(
          <Content contentContainerStyle = {searchPeopleScreenStyle.listOfUsersWrapperGlobal}>
                <FlatList
                    data = {this.filterUsers()}
                    keyExtractor = {(item) => (item.userId)}
                    renderItem = {({item}) => (
                        <UserListItem
                                        country = {item.userCountry}
                                        username = {item.userUsername}
                                        ...
                        />
                    )}
                />
            </Content>
        )
    }
}