Question

我需要从单个文件中的单个方法执行的多个ajax请求中呈现数据。

这是ajax方法：

const Сonsts = ( () => {
    function _getUsers(usernames) {
        let users = [];
        usernames.forEach( (username) => {
            let u = $.getJSON(`https://api.github.com/users/${username}`)
                     .done( (data) => { u = data; });
            users.push(u);
        });
        return users;
    }
    return {
        getUsers: _getUsers
    }

})();

因此，我需要在收到服务器的响应时立即呈现请求中的数据。

我需要在此组件中呈现数据：

class Team extends React.Component {

  constructor(props) {
    super(props);
    this.state = this.props.members;
  }

  componentDidMount() {
    this.state.members = this.props.members;
  }

  render () {
    console.log(this.state.members);
    let members = this.state.members.map( (item, index) => {
      console.log(item.responseJSON);
      return (
        <img src={item.avatar_url} key={index} />
      )
    });

    return (
      <div>
        {members}
      </div>
    );
  }
}

我像这样渲染组件：

// $aboutContent is a <div> container.
// Consts.team is the array of github usernames.
React.render(<Team members={Сonsts.getUsers(Сonsts.team)} />, $aboutContent);

但是这段代码给了我Invariant Violation: Team.state: must be set to an object or null，当然，没有任何内容呈现。

即使ajax请求尚未完成，如何才能正确呈现我的组件？所以，基本上，我需要以下行为：用户打开页面; ajax请求被执行，同时<Team />组件在内部没有任何内容呈现，空div＆＃39 ;;一旦ajax请求完成并且有效数据存储在应用程序内的某个变量中，就应该再次触发render方法并呈现所有数据。

你能帮助我实现这个目标吗？

Answer 1

console.log将多次触发。首先是空状态。成员然后当setState发生时。

    function _getUsers(usernames) {
            let users = [];
            usernames.forEach( (username) => {
                    let u = $.getJSON(`https://api.github.com/users/${username}`)
                                     .done( (data) => { u = data; });
                    users.push(u);
            });
            return {members: users};
    }

class Team extends React.Component {

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

    componentWillReceiveProps(nextProps) {
        this.setState(_getUsers(nextProps.team));
    }

    render () {
        console.log(this.state.members);
        let members = this.state.members.map( (item, index) => {
            console.log(item.responseJSON);
            return (
                <img src={item.avatar_url} key={index} />
            )
        });

        return (
            <div>
                {members}
            </div>
        );
    }
}

在顶级组件中。

React.render(<Team team={Сonsts.team} />, $aboutContent);

ReactJS。从多个ajax请求中呈现数据

1 个答案: