reactjs - 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 的正确方法？

完整代码在这里。