在渲染回调中中继QueryRenderer setState

Question

这是我的父组件：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loggedIn: false
        }
        this.handleFailure = this.handleFailure.bind(this);
    }

    handleFailure() {
        this.setState({ loggedIn: false });
    }

    render() {
       return (
           <MainSectionRenderer onFailure={this.handleFailure} />
       )
    }
}

这是我的QueryRenderer组件包装器：

const MainSectionRenderer = componentProps => {
    <QueryRenderer
        environment={myCustomEnvironment}
        query={graphql`
            query MainSectionRendererQuery {
                ...RandomFragment
            }
        `
        renderer={function({ error, props }) {
            if (error) {
                componentProps.onFailure();
            } else {
                return <MainSection />
            }
        }
}

由于回调是一个渲染函数，我无法使用作为参数传递的onFailure方法，因为它会调用父setState上的App。

我通过渲染一个在onFailure上调用componentWillMount方法的新空组件来临时解决这个问题。

这绝对不是解决此问题的最佳方法，因此我想知道如何在不涉及子MainSection组件的情况下改进这一点？