javascript - 将 prop 传输到那里后如何重新渲染 React Native 组件

Question

我正在尝试实现一个可以按用户名搜索的用户列表。

在更改父组件 SearchPeopleScreen 中的 prop usernameFilter 并传递它后，我遇到了重新渲染 SearchListOfUsers 的问题到子 SearchListOfUsers。

我知道当组件的 state 更改时应该重新渲染自身，但在我的情况下，甚至子组件的状态也不会改变。如何更新我的 child 的补偿。在我传递 prop usernameFilter 之后 SearchListOfUsers？

这是我的 parent 补偿。 搜索人物屏幕:

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>
    )
}
}

这是我的 child 的补偿。 用户搜索列表:

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

如果您需要根据父组件中的选择来过滤数据，您也应该在那里过滤您的集合。一旦您过滤了集合，就应该将其传递给子组件。

这种情况下的子组件应该是纯粹的展示性和静态的。它不应该关心过滤数据或更新其组件状态等，它只想渲染它传递的任何 Prop 。搜索选项、用户名过滤器、数据集合