Question

在componentDidMount挂钩处触发AJAX请求的许多反应项目中都会出现一个常见用例。

我无法绕过这个建议的做法，让我们说我们的组件位于AJAX请求取决于来自prop parent component的{{1}}以下MyComponent如果从其父组件（带有新道具）触发第二次渲染操作，则无法使用正确的ajax数据进行适当更新。但是componentDidMount无论如何都不会被执行

所以我认为这种做法会引起问题，任何人都可以帮助确认并证明这一点吗？如果我错了，请纠正我。

＆＃13;

export default class MyComponent extends Component {
  constructor() {
    super(...arguments);
  }
  
  async componentDidMount() {
    const data = await fireAjax(this.props.id);
    this.setState({data});
  }

  render() {
    const { data } = this.state;
    return (
        { data && <span>{data}</span> }
    );
  }
}

＆＃13;

Answer 1

如果在组件安装之前执行AJAX请求，组件可能会在请求完成之前呈现，并且您仍然遇到数据尚未就绪的问题。

您应该做的是在父组件中发出AJAX请求，一旦请求完成，您就可以通过props将数据从AJAX请求传递给子组件。也许展示一些东西来通知用户它正在加载。

Answer 2

我认为你的意思是componentDidMount。

此方法只会被调用一次。只有在删除并重新安装组件时，才会在重新渲染时再次调用它。

如果组件需要使用不同的数据定期更新，您最好将此数据提取到其父级并将其作为prop传递。您可以在数据解析时传递loading道具，然后在准备就绪时传递数据。

Answer 3

你误解了这种模式。

componentDidMount是在组件安装时要执行的异步提取的正确位置。如果还有一些其他动作应该触发数据获取，那么是的，在那个其他位置进行异步调用。

你真正想要研究的是整个Flux范例，它是一个完全充实的数据流，用于反应（尽管它也可以在其他地方使用）。有很多软件包用有用的处理程序包装该设计模式，最受欢迎的是Redux。

但不，没有人建议在生命周期钩子中发生所有异步调用。

Answer 4

我认为您应该查看这篇文章：https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/，作者Dave Ceddia。这里的想法与您在代码中编写的内容相匹配。所以是的，这是在React中处理副作用的正确方法之一。

只需在此处复制/粘贴；）

实际上，有两个原因，componentDidMount是放置调用以获取数据的最佳位置：

使用DidMount可以清楚地表明，只有在初始渲染之后才会加载数据。这提醒您正确设置初始状态，以免最终导致出现错误的未定义状态。

如果您需要在服务器上渲染应用程序（SSR /同构/其他流行语），componentWillMount实际上将被调用两次-一次在服务器上，再一次在客户端上-这可能不是您想要的。将数据加载代码放入componentDidMount中将确保仅从客户端获取数据。

为什么componentDidMount是解雇AJAX请求的最佳位置

4 个答案: