反应本机设置状态

Question

我正在尝试通过渲染函数更改我的状态，但它不起作用。

render() {
    return (
        <View>
            // some code

            {this._renderModal()}
        </View>
    )
}

_renderModal() {
        let channel = this.props.pusher.subscribe('my-channel');
        channel.bind('my-event', data => {
            this.setState({
                requestedToEnter: false
            });
            this.props.navigation.getNavigator('root').push(Router.getRoute('order', { restaurant_id }));
        });

        return (
            <Modal
                animationType={'slide'}
                transparent={false}
                visible={this.state.requestedToEnter}
                onRequestClose={this._handleEnter}>

                // some components
            </Modal>
        )
}

当我在 my-channel 上收到 my-event 时，它会触发绑定到它的函数。 setState 方法不会更改状态（或者会更改但不会重新渲染组件）。我认为这是因为我在事件函数中使用了 setState 方法。当我收到来自推送器的事件时如何关闭 Modal？

Answer 1

在您的 render() 中调用 this.setState 函数是一种不好的做法，因为每次调用 setState 时，组件都会使用绑定到您的组件/子组件的更新后的状态值来呈现自身。

或者，您可以创建状态变量

this.state = {
  isModalOpen: true
}

并将您的推送事件侦听器放入 componentDidMount() 并在回调中更新您的状态变量值。然后，使用状态变量控制模态组件的可见性：

<Modal
  animationType={'slide'}
  transparent={false}
  visible={this.state.isModalOpen}></Modal>

反应本机设置状态

React Native setState

pusher

reactjs

react-native