[英]How to re-render child component when Parent state is changed?
我有父级组件,其中也包括子级组件。 我将一些道具从父母那里传递给孩子。 我的问题是当我更改滑块以在父组件上获得新值时,重新渲染在父组件上不起作用。 这也导致无法重新渲染子组件。
更改滑块时,将执行该函数,并以新值更改状态。 但是此setstate不会触发重新呈现。 我正在调试下面的代码,控制台日志是这样的(将滑块从0更改为1);
delay -> 0
delay timetypes -> 0 (6 times executed)
delay -> 1
当我触摸其中一个可触摸的不透明度时,得到this.state.delay = 0,但我通过滑块将0更改为1。
// welcome.js
export default class welcome extends Component {
constructor(props) {
super(props);
this.state = {
GridViewItems: [
{ key: "1 min game", min: 1, sec: 0 },
{ key: "3 min game", min: 3, sec: 0 },
{ key: "5 min game", min: 5, sec: 0 },
{ key: "7 min game", min: 7, sec: 0 },
{ key: "10 min game", min: 10, sec: 0 },
{ key: "15 min game", min: 15, sec: 0 }
],
value : 0
};
}
GetGridViewItem(item) {
Alert.alert(item);
}
change(value) {
console.log("change value -> " + value );
this.setState({
value: value
})}
render() {
console.log("delay -> " + this.state.value);
return (
<View style={styles.MainContainer}>
<Text style={styles.welcomeText}>Welcome ChessClock</Text>
<Text style={styles.text}>Delay Time: {this.state.value}</Text>
<Slider
style = {styles.slider}
step={1}
maximumValue={20}
value={this.state.value}
onValueChange={(val)=> this.setState({value: val})}
/>
<FlatList
data={this.state.GridViewItems}
renderItem={({ item }) => (
<TimerTypes
navigation={this.props.navigation}
BlockStyle={styles.GridViewBlockStyle}
TextStyle={styles.GridViewInsideTextItemStyle}
title={item.key}
time={item.min * 60 + item.sec}
delay = {this.state.value}
/>
)}
numColumns={2}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: "center",
flex: 1,
margin: 10,
paddingTop: Platform.OS === "ios" ? 20 : 0
},
GridViewBlockStyle: {
justifyContent: "center",
flex: 1,
alignItems: "center",
height: 100,
margin: 5,
backgroundColor: "#05BC87"
},
GridViewInsideTextItemStyle: {
color: "#fff",
padding: 10,
fontSize: 18,
justifyContent: "center"
},
welcomeText: {
color: "#0F2284",
padding: 60,
fontSize: 30,
justifyContent: "center",
textAlign: "center"
},
text: {
fontSize: 20,
justifyContent: "center",
marginLeft:10
},
slider: {
width: '100%',
marginBottom: 25,
justifyContent: "center",
alignItems : "center"
}
});
// timeTypes
export default class timeTypes extends Component {
constructor(props) {
super(props);
this.state = {
delay : props.delay
}
}
componentWillReceiveProps(nextProps) {
this.setState({ delay: nextProps.delay });
}
render() {
console.log("delay timetypes -> " + this.props.delay);
console.log("delay timetypes -> " + this.state.delay);
return (
<TouchableOpacity onPress={() => this.props.navigation.navigate('Home', {
time: this.props.time,
delay : this.state.delay
})}
style={this.props.BlockStyle} >
<Text style={this.props.TextStyle}>
{this.props.title}
</Text>
</TouchableOpacity >
);
}
}
快乐的路径应该是在更改滑块以获取新数字时,父级将重新呈现,子级应获取新值。
github仓库: https : //github.com/Erkanerkisi/ChessClock
根据文档:
FlatList是一个PureComponent,这意味着如果props保持相等,它将不会重新渲染。 确保您的renderItem函数所依赖的所有内容均作为更新后不是===的道具(例如extraData)传递,否则您的UI可能不会随着更改而更新。 这包括数据属性和父组件状态。
因此,尝试将extraData={ this.state.value }
添加到FlatList组件中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.