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

在每次调用setState时，在render（）中调用this.setState函数是一种不好的做法，组件将使用绑定到组件/子组件的更新状态值呈现自身。

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

this.state = {
  isModalOpen: true
}

将您的pusher事件监听器放在componentDidMount（）中并更新回调中的状态变量值。然后，使用状态变量控制模态组件可见性：

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

React Native setState

1 个答案: