Question

我刚开始学习React。我想使用我已经构建的REST api但是当我试图从我的api中获取用户元素时我遇到了问题。

我有一个 UserServices 类，其中有两个axios方法， getUserById 和 getAllUsers 。

public static getUserById(id: number): Promise<IUser> {
    return new Promise((resolve, reject) => {
        axios.get(this.root + id).then((response: any) => {
            let character = this.toUser(response.data);
            resolve(character);
        },
            (error: any) => {
                reject(error);
            });
    });
}

我的问题是当我尝试渲染用户时，因为我什么都没得到。

class App extends React.Component {
  user: IUser;
  render() {
    UsersService.getUserById(2).then(res => this.user = res);

    return (
        <div className="app">
          <User user = {this.user} />
        </div>
    );
  }
}

这是我的用户组件

export interface UserProps {
    user: IUser;
}

interface UserState {
    myUser: IUser;
}

export class User extends React.Component<UserProps, UserState> {

    public static defaultProps: UserProps = {
        user: {
            name: ''
        }
    }

    constructor(props: UserProps) {
        super(props);

        this.state = {
            myUser: props.user
        }
    }

    render() {
        return (
            <div>
                <span>{this.state.myUser.name}</span>
            </div>
        );
    }
}

Answer 1

对于任何变量，您需要使用状态管理，以便react可以检测到this.state.user的更改，并重新呈现相应的组件。

编辑：正如Cleiton所说，componentDidMount()将是一个更好的召集电话。

设置您的状态，以便在状态发生变化时您的应用会重新渲染。在任一组件中，请务必检查User是否为null，并在render方法中显示某种类型的加载，或者在尚未加载用户的情况下返回null（不呈现任何内容）。

class App extends React.Component {
  constructor() {
      super();

      this.state = {
          user: null
      }
  }

  componentDidMount() {
    UsersService.getUserById(2).then(res => this.setState({user: res}));
  }

  render() {

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

组件什么都不呈现

1 个答案: