如何在兄弟组件完成 API 请求后重新渲染反应组件？

Question

我想在加载反应组件后更新同级元素。使用下面的示例，我想在加载 PopupTable 后将“数据尚未呈现”更改为“Hello world”。

我的问题是，如果我在 render() 调用期间尝试更改状态，我会收到警告，告诉我不要这样做，处理此问题的正确方法是什么？

class PopupBase extends React.Component {
    render() {
        return (
            <div>
                <div>
                    The data has not yet rendered.
                </div>
                <DataProvider endpoint="products/ajax/get_products_from_pickle" render={data =>
                    // Once the code get to here, I want to update the div above
                    <PopupTable data={data}/>
                }/>
            </div>
        )
    }
}


class DataProvider extends Component {
    static propTypes = {
        endpoint: PropTypes.string.isRequired,
        render: PropTypes.func.isRequired
    };
    state = {
        data: [],
        loaded: false,
        placeholder : this.props.placeholder
    };

    componentDidMount() {
        fetch(this.props.endpoint)
            .then(response => {
                if (response.status !== 200) {
                    return this.setState({placeholder: "Something went wrong"});
                }
                return response.json();
            })
            .then(data => this.setState({data: data, loaded: true}));
    }

    render() {
        const {data, loaded, placeholder} = this.state;
        return loaded ? this.props.render(data) : <div>{placeholder}</div>;
    }
}

export default DataProvider;

Answer 1

其中一个解决方案是将您的代码更改为：

class PopupBase extends React.Component {
    render() {
        return (
        <DataProvider          
     endpoint="products/ajax/get_products_from_pickle"
     render={data =>
           <div>             
                <div>
                    The data has { data ? "" : "not yet" } rendered.
                </div>                                    
                <PopupTable data={data}/> 
           </div>    
        }/>);
    }
}

更好的方法是将数据加载逻辑提取到高阶函数中。因此，您将拥有一个纯粹基于道具呈现的纯反应组件。另一个“包装器”组件（即DataProvider）从 API 加载数据并将data prop 提供给可视组件。