Javascript 如何在将prop传输到本地组件后重新渲染React本地组件
我正在尝试实现一个用户列表，可以通过用户名进行搜索 在更改父组件Javascript 如何在将prop传输到本地组件后重新渲染React本地组件,javascript,reactjs,react-native,Javascript,Reactjs,React Native,我正在尝试实现一个用户列表，可以通过用户名进行搜索 在更改父组件SearchPeopleScreen中的propusernameFilter并将其传递给子组件SearchListOfUsers后，我遇到了重新呈现SearchListOfUsers的问题 我知道当一个组件的状态改变时，它应该重新呈现自己，但在我的例子中，即使是子组件的状态也不会改变。如何更新我的子女薪酬搜索列表用户在我通过一个道具用户名过滤器后 这是我的父母公司搜索联系人屏幕： export default class Searc
SearchPeopleScreenusernameFilterSearchListOfUsersSearchListOfUsers状态改变时，它应该重新呈现自己，但在我的例子中，即使是子组件的状态也不会改变。如何更新我的子女薪酬<代码>搜索列表用户用户名过滤器后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>
)
}
}
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>
)
}
}
}
导出默认类SearchPeopleScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
...
usernameFilter:“”
}
}
render（）{
返回(
搜寻
{
this.setState（{usernameFilter:text}）；
}}
占位符='键入用户名'
style={searchPeopleScreenStyle.searchInput}
maxLength={15}
/>
...
{/*搜索屏幕的正文*/}
)
}
}
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>
)
}
}
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>
)
}
}
}
导出默认类SearchListOfUsers扩展组件{
建造师（道具）{
超级（道具）；
此.state={
usersDataArray:[]，
usernameFilter:this.props.usernameFilter
};
this.arrayHolder=[]；
console.warn（'1-'+this.state.usernameFilter）
}
componentDidMount（）{
这是getAllUsersData（）
console.warn（this.state.usernameFilter）
if（this.state.usernameFilter）{
这是filterUsers（）；
}
}
getAllUsersData=（）=>{
返回新承诺（（解决、拒绝）=>{
//获取用户数据并创建数组
...
推送（{…}）；
这是我的国家({
usersDataArray:allUsersDataArray
});
解决（）；
})
}
过滤器用户=（）=>{
const newUsersDataArray=this.arrayHolder.filter（（用户）=>{
const usernameinterlist=user.userUsername.toUpperCase（）；
const inputedUserName=this.state.usernameFilter.toUpperCase（）；
返回列表中的用户名。包括（输入用户名）；
});
这是我的国家({
usersDataArray:newUsersDataArray
})
}
render（）{
返回(
（item.userId）}
renderItem={（{item}）=>(
)}
/>
)
}
}
}
在这种情况下，子组件应该是纯粹的表示和静态的。它不应该关心过滤数据或更新它的组件状态等，它只想呈现它传递的任何道具。searchOption、usernameFilter、dataCollection如果您需要根据父组件的选择筛选数据，您还应该在那里筛选您的集合。筛选完集合后，应将其传递给子组件
在这种情况下，子组件应该是纯粹的表示和静态的。它不应该关心过滤数据或更新它的组件状态等，它只想呈现它传递的任何道具。searchOption、usernameFilter、dataCollection您可以使用componentDidMount生命周期方法筛选用户，这意味着它只会在子组件的装载过程中运行一次 可以在渲染方法中进行过滤，如
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>
)
}
}
filterUsers=（）=>{
如果（！this.props.usernameFilter.length）返回this.state.usersDataArray
返回此.state.usersDataArray.map（（用户）=>{
const usernameinterlist=user.userUsername.toUpperCase（）；
const inputedUserName=this.props.usernameFilter.toUpperCase（）；
返回列表中的用户名。包括（输入用户名）；
});
}
render（）{
返回(
（item.userId）}
renderItem={（{item}）=>(
)}
/>
)
}
}
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>
)
}
}
filterUsers=（）=>{
如果（！this.props.usernameFilter.length）返回this.state.usersDataArray
返回此.state.usersDataArray.map（（用户）=>{
const usernameinterlist=user.userUsername.toUpperCase（）；
const inputedUserName=this.props.usernameFilter.toUpperCase（）；
返回列表中的用户名。包括（输入用户名）；
});
}
render（）{
返回(
（item.userId）}
renderItem={（{item}）=>(
)}
/>
)
}
}