React-如何在AJAX加载上更新子级

Question

这里的例子是——https://facebook.github.io/react/tips/initial-ajax.html -修改如下。

this.state.username是加载时的“占位符”，并传递给

AJAX加载后this.state.username更改为octocat，但是...

为什么这不是传递到

var UserGist = React.createClass({

    getInitialState: function() {
        return {
            username: this.props.username
        };
    },

    render: function() {
        return (
            <div>
                {this.state.username}
            </div>
        );
    }

});

var App = React.createClass({

    getInitialState: function() {
        return {
            username: 'placeholder'
        };
    },

    componentDidMount: function() {
        this.serverRequest = $.get(this.props.source, function (result) {
            var lastGist = result[0];
            this.setState({
                username: lastGist.owner.login
            });
        }.bind(this));
    },

    componentWillUnmount: function() {
        this.serverRequest.abort();
    },

    render: function() {
        return (
            <div>
                <UserGist username={this.state.username} />
            </div>
        );
    }

});

ReactDOM.render(
    <App source="https://api.github.com/users/octocat/gists" />,
    document.getElementById('main')
);




Answer 1

您应该通过UserGist组件中的道具访问该值，因为它将作为prop传递：

var UserGist = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.username}
      </div>
    );
  }
});

然后可以将其表示为无状态功能组件（如果您使用React

function UserGist(props) {
  return <div>{props.username}</div>
}

没有必要将其转换为状态，除非您要在组件本身中对其进行某种突变。最好尽量使用道具，尽量减少状态。

进一步阅读：

• statevsprops：React中state和props的区别是什么？
无状态功能组件

Answer 2

您正在将新用户名传递给子组件，但没有更新子组件状态。

如果您想在组件接收到新道具时更新子状态，那么应该实现它。

UserGist组件。

componentWillReceiveProps: function(nextProps){
       this.setState({username: nextProps.username});
}