Question

我使用React与webpack和babel编译jsx。我有一个如下所示的父组件：

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接收的数据。但是，当我尝试在孩子Nav中访问它时，只需调用console.log(this.props.user)，就会打印出一个空数组，即[]。

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

Answer 1

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

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

在我看来，你没有做错什么，这取决于你想做什么。例如，您可以在getinitialstate中添加一条消息，例如mgs：“请等待数据获取”并在数据到达时删除此消息。

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

自言自语我会在getinitialstate中加载一个加载信息并按照你的方式继续。

在成功执行ajax调用设置状态

1 个答案: