子组件中的ReactJS - Ajax
子组件中的ReactJS - Ajax
提问于 2018-11-07 07:16:38
我正在开发一个简单的网站使用React + nextJS。
为了保持简单，假设我有两次跌落。
Dropdown A (country)
- Dropdown B (run time options based on the country selection)下拉列表A在主页上。下拉列表B是一个独立的组件，我设计了我的组件，如下所示。
class MySubComponent extents Component{
state = {
options: []
}
static async getDerivedStateFromProps(props){
let options = await axios(....);
console.log(options)
return {options};
}
render(){
<div>
{this.state.options}
</div>
}
}主页包括主页上的MySubComponent。
<MySubComponent loadOptionBfor={dropdownAvalue} />下拉列表A的OnChange事件应该重新加载下拉列表B。我看到了控制台日志语句，其中显示了B get选项。但是，在ajax请求完成之前，MySubComponent将在没有任何选项的情况下呈现。
怎么解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-07 07:46:23
"should return an object to update the state, or null to update nothing"，它只能同步地做到这一点。
我认为您最好将当前的道具和componentDidUpdate中以前的道具进行比较，如果您想要比较更改的道具，可以获得您的新选项。
示例
class MySubComponent extends Component {
state = {
options: []
};
async componentDidUpdate(prevProps) {
if (prevProps.country !== this.props.country) {
let response = await axios(/* ... */);
this.setState({ options: response.data });
}
}
render() {
return (
<select>
{this.state.options.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53192350
复制相关文章
相似问题
python小数四舍五入问题
Python大小数四舍五入问题
小数四舍五入的问题
MySQL小数四舍五入问题
KendoNumericTextBox小数四舍五入问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
