Question

我是React的新手，我正在尝试弄清楚如何正确地进行提取。我有一个React组件，每当其父服务器的状态更新时，我都希望从远程服务器进行更新。

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

我尝试了以下操作：

如果我仅对fetch执行。componentDidMount调用，它将忽略任何状态更新。

如果我在fetch上执行。componentDidUpdate调用，它也会无休止地调用服务器（我认为是由于某些update-render循环）

我尝试使用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} />
);
}
}

Answer 1

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

您也应该阅读以下内容：https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

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

Answer 2

鉴于我们在评论中的对话，我只能假设您的搜索词在父项中。因此，我建议您做的是将它作为道具传递给该组件，以便可以在componentDid更新中执行以下操作：

componentDidUpdate(prevProps) {
  const { searchTerm: previousSearch } = prevProps;
  const { searchTerm } = this.props;

  if (searchTerm !== previousSearch) fetch() ....
}

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

2 个答案: