在兄弟组件完成API请求后,如何重新呈现react组件?

问题描述 投票:2回答:1

我想在反应组件加载后更新兄弟元素。使用下面的示例,我想在加载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;
javascript reactjs
1个回答
2
投票

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

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提供给可视组件。

© www.soinside.com 2019 - 2024. All rights reserved.