javascript - 父级的 setState 不会触发子级的 componentWillReceiveProps
问题描述
我有一个组件父组件和一个组件子组件,其中一些道具连接到父状态。
在父级中,我调用 setState 但componentWillReceiveProps
子级的功能没有被触发。
更准确地说,它在父级的某个点被触发,而不是在另一个点被触发。
这是父母:
... imports
class HomeScreen extends Component {
constructor(props) {
super(props);
dispatchFbPermissionAction = this.dispatchFbPermissionAction.bind(this);
this.state = {
fbPermissions: [],
}
}
componentDidMount () {
this._loadInitialState();
}
_responsePermissionsCallback(error: ?Object, result: ?Object) {
if (error) {
log('Error fetching data: ' + error.toString());
} else {
dispatchFbPermissionAction(result.data);
}
}
dispatchFbPermissionAction = (data) => {
// **NOT FIRED**
this.setState({
fbPermissions: data
});
this.props.fbPermissionsLoaded(data);
}
async _loadInitialState() {
AccessToken.getCurrentAccessToken().then(
(data) => {
if (data) {
const infoRequest = new GraphRequest(
'/me/permissions',
null,
this._responsePermissionsCallback,
);
new GraphRequestManager().addRequest(infoRequest).start();
// **FIRED**
this.setState({
...
});
this.props.loggedIn();
}
}
);
}
render () {
const { navigation } = this.props;
return (
<Container>
<ScrollableTabView
<View tabLabel="ios-film" style={styles.tabView}>
<Text style={styles.tabTitle}>{_.toUpper(strings("main.theatres"))}</Text>
<ListTheatre navigation={this.props.navigation} filterText={this.state.filterText} isLoggedIn={this.state.isLoggedIn} fbPermissions={this.state.fbPermissions}></ListTheatre>
</View>
</ScrollableTabView>
</Container>
)
}
}
const mapStateToProps = (state) => {
return {
isLoggedIn: state.isLoggedIn,
listTheatre: state.listTheatre,
listMusic: state.listMusic
};
};
// wraps dispatch to create nicer functions to call within our component
const mapDispatchToProps = (dispatch) => ({
startup: () => dispatch(StartupActions.startup()),
loggedIn: () => dispatch({
type: LOGGED_IN
}),
fbPermissionsLoaded: (data) => dispatch({
type: FB_PERMISSIONS_LOADED,
fbPermissions: data
})
});
export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)
这是孩子:
... imports
class ListTheatre extends Component {
constructor(props) {
super(props);
this.state = {
...
}
}
componentWillReceiveProps(nextProps) {
log(this.props)
}
shouldComponentUpdate(nextProps, nextState) {
return !nextState.fetching;
}
render() {
const { navigate } = this.props.navigation;
return (
<SectionList
...
/>
)
}
}
ListTheatre.propTypes = {
isLoggedIn: PropTypes.bool.isRequired,
}
const mapStateToProps = (state) => {
return {
isLoggedIn: state.isLoggedIn
};
};
const mapDispatchToProps = (dispatch) => ({
startup: () => dispatch(StartupActions.startup())
});
export default connect(mapStateToProps, mapDispatchToProps)(ListTheatre);
我不明白为什么GraphRequestManager().addRequest
调用后的 setState 像一个魅力(子组件的 componentWillReceiveProps 函数被触发),而 dispatchFbPermissionAction 函数中的 setState 不会触发子组件的 componentWillReceiveProps 函数。
解决方案
这是由于connect
/Connect(ListTheatre)
包装了您的 ListTheatre 组件在内部为您实现了 sCU(shouldComponentUpdate),通过将纯连接选项设置为 false 来关闭它
export default connect(mapStateToProps, mapDispatchToProps, null, {pure: false})(ListTheatre)
[纯](布尔值):如果为 true,如果相关的 state/props 对象基于它们各自的相等性检查保持相等,connect() 将避免重新渲染和调用 mapStateToProps、mapDispatchToProps 和 mergeProps。假设被包装的组件是一个“纯”组件,并且不依赖于任何输入或状态,除了它的 props 和选定的 Redux 存储的状态。默认值:真
推荐阅读
- spring - 在 Spring 中配置 Axon 以进行集成测试
- angular - 如何动态更改角度材料中按钮的背景颜色而无需单击它
- python - AUC 曲线甚至没有显示在图上
- python - 编写干净的 Julia 代码,包含许多没有成员函数的子案例
- visual-studio-code - 如何为由电子运行的本机节点插件设置 VSCode 调试配置?
- html - 文件的默认值
- python-3.x - 如何使用python中的最后一个字符删除列表中的自定义单词
- jenkins - Jenkins扩展选择参数groovy脚本读取json文件
- reactjs - 我在 ios 中看不到 anticon anticon-star (ant design) 的图标,在 android 中它完美运行
- android - 有没有办法检查 Play 商店应用程序上的网络连接?