React parent 在成功 ajax 调用设置状态之前使用初始状态呈现

Question

我将 React 与 webpack 和 babel 一起用于编译 jsx。我有一个看起来像这样的 parent 组件：

const Menu = module.exports = React.createClass({
    loadUser() {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', this.state.url, true);
        xhr.onload = function() {
            let data = JSON.parse(xhr.responseText);
            this.setState({
                user: data
            });
        }.bind(this);
        xhr.send();
     },

     componentDidMount() {
         this.loadUser();
     },

     getInitialState() {
         return {
             url: this.props.url,
             user: []
         };
     },

    render: function() {

        return (
            <div className="menu">
                 <Nav user={this.state.user} />
                      ...
            </div>
        );
    }

});

如您所见，我尝试使用 this.setState(...) 将 this.state.user 设置为从 XMLHttpRequest 接收的数据。但是，当我尝试通过简单地调用 console.log(this.props.user) 在 child、Nav 中访问它时，只会打印一个空数组，即 []。

我在这里做错了什么？我已经阅读了 React 文档，但我很困惑。在下面的 tutorial 中，数据从服务器获取并传输到 child 组件，其方式与我所做的（上文）类似。任何帮助将不胜感激。如果我需要提供任何额外的代码或上下文，请告诉我。谢谢。

Answer 1

getInitialState 在第一次渲染时使用，因此它在您的 ajax 调用之前完成是正常的，因为 ajax 调用是在 ComponentDidMount 中执行的，它在第一次渲染后立即触发。

在 ajax 调用为空之前，您的 state.user 将为空，然后当收到数据时，它应该使用新数据更新您的视图。

在我看来你没有做错任何事，这取决于你想做什么。例如，您可以在 getinitialstate 中放置一条消息，如 mgs:"Please wait data are fetching" 并在数据到达时删除此消息。

否则，如果您绝对需要在渲染组件之前准备好数据，您可以使用它：https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html请仔细阅读它可能不适合您的使用。

就我自己而言，我会在 getinitialstate 中放置一个加载消息，然后按照您的方式进行。

React parent 在成功 ajax 调用设置状态之前使用初始状态呈现

React parent renders with initial state before successful ajax call sets state

reactjs

webpack