React Context API-在上下文更改时重新渲染组件，而无需在使用者中包装渲染

Question

我正在使用this.context在生命周期方法中获取上下文数据，但是当我不使用Consumer包装组件时，然后当上下文数据发生更改时，就不会重新呈现我的组件。

所以代替这个：

render() {
        console.log('companies render');
        const { modal, singleCompanyData, loading } = this.state;
        const { itemsPerPage } = this.props;
        const columns = [
            { key: 'id', title: 'ID' },
            { key: 'title', title: 'Title' },
            { key: 'city', title: 'City' },
            { key: 'btn', title: 'Action' }
        ];
        return (
            <SharedDataConsumer>
                {({ companies }) => (
                    <React.Fragment>
                        <Companies
                            columns={columns}
                            data={companies}
                            addCompany={this.addCompany}
                            totalRecords={companies.length}
                            loading={loading}
                            itemsPerPage={itemsPerPage}
                        />
                        <AM2Modal open={modal} handleModalClose={this.handleModalClose}>
                            <CompaniesEdit
                                singleCompanyData={singleCompanyData}
                                handleModalClose={this.handleModalClose}
                                inputChangeEvent={this.inputChangeEvent}
                            />
                        </AM2Modal>
                    </React.Fragment>
                )}
            </SharedDataConsumer>
        );
    } 

我需要使用类似的东西，以便在渲染之前格式化数据：

render() {
        console.log('companies render');
        const { modal, singleCompanyData, loading } = this.state;
        const { companies } = this.context;
        const { itemsPerPage } = this.props;
        const newComp = companies.map(value => ({
           ...value,
           btn: this.actionBtns(value.id)
        }));
        const columns = [
            { key: 'id', title: 'ID' },
            { key: 'title', title: 'Title' },
            { key: 'city', title: 'City' },
            { key: 'btn', title: 'Action' }
        ];
        return (
            <React.Fragment>
                <Companies
                    columns={columns}
                    data={newComp}
                    addCompany={this.addCompany}
                    totalRecords={companies.length}
                    loading={loading}
                    itemsPerPage={itemsPerPage}
                />
                <AM2Modal open={modal} handleModalClose={this.handleModalClose}>
                    <CompaniesEdit
                        singleCompanyData={singleCompanyData}
                        handleModalClose={this.handleModalClose}
                        inputChangeEvent={this.inputChangeEvent}
                    />
                </AM2Modal>
            </React.Fragment>
        );
    }

但是这样，上下文更改后组件不会得到更新-上下文数据是异步的。

我做了研究，并看到了这个示例，其中他们将导出和上下文数据包装为道具，但不确定这是否是使用最新上下文API的正确方法？

完整代码here.