problem description
I use FlatList to make a list page. At renderItem, I return a child component called < Item / >. There is a clickable trigger in the child component to return State to the parent < Text > component, but the page does not re-render after clicking, but the modified state will be re-rendered to the page only when I refresh the list or upload another page.
(ps. This should indicate that the value in the parent component State has indeed changed, but I am confused that the interface is not immediately re-rendered)
the environmental background of the problems and what methods you have tried
related codes
parent component
export default class List extends Component{
//
constructor(props) {
super(props);
this.state = {
stateName:"parent",
};
};
[... ...]
//
updateState (data) {
this.setState(data);
}
render(){
return <Flatlist
[... Flatlist...]
renderItem={ ({item}) => {
return <Item
title={item.title} //
thumb={item.thumb} //
stateName={this.state.stateName}
updateParentState={this.updateState}
/>}}
/>
}
}subcomponents
const Item =(props)=>{
const {title,thumb,stateName} = props;
//
setParentState=(data)=>{
props.updateParentState(data);//thisthis.props.updateParentState(data)
}
return(
<View>
[... ...]
<Image source={{uri:thumb}} style={styles.img}/>
<Text
onPress={() => {this.setParentState( {stateName: "child"} )} }
>{stateName}</Text>
</View>
)
}ideas
the stateName passed by the parent component is set locally, unlike the other two passed title and thumb, which are parsed by json after they are obtained on the Internet. Maybe you can put the stateName on the server. Once the stateName of the server changes, maybe the Flatlist will render again.