我想在反应组件加载后更新兄弟元素。使用下面的示例,我想在加载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;
其中一个解决方案是将您的代码更改为:
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提供给可视组件。