反应原生 setState答案

【问题标题】：React Native setState反应原生 setState
【发布时间】：2017-03-09 05:32:51
【问题描述】：

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

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？

【问题讨论】：

标签： reactjs react-native pusher

【解决方案1】：

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

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

this.state = {
  isModalOpen: true
}

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

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

【讨论】：