组件不呈现任何内容[重复]答案

【问题标题】：Component renders nothing [duplicate]组件不呈现任何内容[重复]
【发布时间】：2017-12-13 18:37:17
【问题描述】：

我刚开始学习 React。我想使用我已经构建的 REST api，但在尝试从我的 api 获取 user 元素时遇到了问题。

我有一个 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>
        );
    }
}

【问题讨论】：

this.user 在您返回包含在App#render 中的div 时仍将是undefined。请参阅链接的 dupetarget 了解原因。承诺稍后解决。您应该是 1. 更早地检索用户，2. 在加载用户时显示“正在加载”消息，以及 3. 在 then 回调中使用 setState 在您拥有用户时更改状态（这将导致新的渲染）。
@T.J.Crowder 这不是那个问题的重复。
@FrankerZ：是的。读一读。在异步结果到达之前尝试使用异步结果再清楚不过了。
@T.J.Crowder 这是状态没有被重新读取以触发重新渲染的错误。虽然该答案提到了刚刚返回的渲染方法的异步性质，但我认为这个问题更直接地与为什么当用户被解析时应用程序没有重新渲染有关。
@T.J.Crowder 都是骗子，但最后一个答案最好。

标签： javascript reactjs

【解决方案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>
    );
  }
}

【讨论】：

render 方法应该是纯粹的，你不应该做任何与在渲染函数中修改任何组件状态相关的远程操作。告诉他改用componentDidMount。
User 将抛出上述异常，除非您还修改了User（或修改上面的render 以在this.state.user 为null 时不使用User）。