Question

我有React组件，它们使用外部Web服务来访问数据以进行渲染。我想在渲染之前加载数据，因为我希望它被搜索引擎索引。

这是我的组件：

class AboutPage extends React.Component {

    async componentWillMount() {
        let response = await EventWS.doSearch();

        this.setState({
            eventList : response.data
        })
    }

    render() {
        /* ... */
    }
}

（我试图使用async / await，因为我觉得它可能有所帮助，但没有。）

当尝试使用服务器端渲染加载页面时，我收到了警告：

Warning: setState(...): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op. Please check the code for the FluxContainer(AboutPage) component.

表示在componentWillMount结束后完成了setState。

在我的具体案例中，最好的方法是什么？是否有一种简单的方法可以同步进行ajax调用？是否建议这样做？

谢谢。

编辑：我找到了一个允许进行同步调用的库： https://github.com/ForbesLindesay/sync-request

但它表示它不适合生产。所以我有点失望。

Answer 1

我没有很多关于Flux的经验，但似乎你应该在componentDidMount方法中这样做。

Answer 2

您可以在componentDidMount中使用基于Axios承诺的get来实现它，例如，您可以参考Handling Events In React及以下示例代码：

constructor(props) {
   super(props);
   this.state = {eventList: []};
   this.Axios = axios.create();
}

componentDidMount() {
        let _this = this;
        this.Axios.get('/your/rest/url')
           .then(function (response) {
               console.log(response);
               _this.setState({eventList: response.data});
           }).catch(function (error) {
               console.log(error);
           });
}

如果您已经在使用Axios，请确保EventWS.doSearch()向您返回Promise并在componentDidMount中调用它，如下所示：

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

componentDidMount() {
        let _this = this;
        EventWS.doSearch().then(function (response) {
            console.log(response);
            _this.setState({eventList: response.data});
        }).catch(function (error) {
            console.log(error);
        });
}

在React.js中呈现之前使用REST资源

2 个答案: