Question

我正在使用服务器端渲染到应用程序，我想在页面呈现服务器端之前通过API加载一些数据。我发现在渲染服务器端和客户端之前调用了componentWillMount，但它没有执行ajax代码。说$未定义，请有人告诉我在渲染页面之前加载数据的方法是什么。

Answer 1

由于问题中缺乏细节，这将是一个通用的答案。但我希望它能够对这个问题有所了解。

根据我的个人经验，如果你的服务器呈现反应，你最好有一个＆＃34; Controller＆＃34;最大的组件，它将处理整个状态，它下面的所有内容应该主要受控制，或者根本不依赖于Ajax来加载数据。例如，如果您正在使用Redux，那么这个＆＃34;控制器＆＃34;组件将是Provider。这是因为1个组件处理服务器与客户端比处理所有这些组件要容易得多。

现在，外部＆＃34;控制器＆＃34;组件应该知道它是否在服务器上并相应地加载数据。一种方法是检查＆＃34; window＆＃34;被定义为。也就是说：如果你在服务器上，不要使用Ajax来加载初始状态..但如果你在客户端，那就使用Ajax。

现在你有最后一个问题。当您进行服务器渲染时，您不希望客户端往返服务器以获取它已有的相同数据。为了防止这种情况，渲染一个脚本块在客户端上执行，包含初始状态，如果设置了此变量，则不要执行Ajax。像这样：

<script>
    window._serverState = {...}
</script>

另一件事......我个人不会将$用于Ajax我不认为React和jQuery应该一起使用。查看Axios。

Answer 2

通常不建议在componentWillMount中进行ajax调用。因为在componentWillMount渲染发生之后，渲染必须等到ajax调用完成并获取新数据。

最好先用空状态数据完成渲染，然后再说

data:[]

并在componentDidMount中进行ajax调用，这是您可以执行dom操作并发送ajax请求的地方。

componentDidMount() {
 sendAjaxRequest()
 .then(
      (newDataFromServer) => {
              this.setState({data : newDataFromServer });

     });
}

从服务器获取新数据后，设置具有新数据的状态

this.setState({data:newDataFromServer});

这将导致从服务器获取的最新数据重新呈现，并且将反映新的状态更改。

如何在componentWillMount中发送ajax，$是未定义的

2 个答案: