最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

仅在状态更新时执行获取请求

运维笔记admin12浏览0评论

仅在状态更新时执行获取请求

仅在状态更新时执行获取请求

我是React的新手,我正在试图弄清楚如何正确使用fetch。我有一个React组件,我想在远程服务器更新其父级状态时从远程服务器更新。

即 - 父状态已更改 - > myComponent调用远程服务器并重新呈现自身。

我尝试过以下方法:

如果我只对fetch执行.componentDidMount调用,它会忽略任何状态更新。

如果我在fetch上执行.componentDidUpdate调用,它会无休止地调用服务器(我假设因为一些更新渲染循环)

我尝试过使用componentWillReceiveProps函数,它可以工作,但我知道它现在已被弃用了。没有componentWillReceiveProps,我怎样才能实现这种行为?

class myComponent extends React.Component {

constructor(props) {
super(props);
this.state = {
  images: []
};
}

componentDidMount() {

let server = "somethingserver.html";
fetch(server)
  .then(res => {
    if (res.ok) {
      return res.json();
    }
    else {
      console.log(res);
      throw new Error(res.statusText);
    }
  })
  .then(
    (result) => {
      this.setState({
        images: result.items
      });
    }
  ).catch(error => console.log(error));
}
componentWillReceiveProps(nextprops) {
if (this.state !== nextprops.state) {
    //same as componentDidMount
    }
}

render() {
 return (
   <Gallery images={this.state.images} enableImageSelection={false} />
);
}
}
回答如下:

你可以使用getDerivedStateFromProps。这是componentWillReceiveProps的更新版本。

你也应该读这个:https://reactjs/blog/2018/06/07/you-probably-dont-need-derived-state.html

使用props更新组件中的内部状态可能会导致复杂的错误,并且通常有更好的解决方案。

发布评论

评论列表(0)

  1. 暂无评论