Question

我有一个组件，我在其中进行API调用以获取与用户相关的数据。这是我的代码，

class Header extends React.Component {

  constructor(props) {
    super(props);
    this.state = { user: null };

  }

  componentDidMount() {

    getUserData(xobni_api).then((data) =>{
      this.setState({user : data});
      console.log(this.state.user);//A


    });
  }
  render() {
    return (
      <div className="header">
        <Masthead user={this.state.user.fullName} />//B
        <PrimaryNav/>

      </div>
    );
  }
}
export default Header;

在第A行，我可以呈现用户的详细信息，而在行B，用户是null，我收到了错误消息。我错过了什么我已尝试在componentDidMount()和componentWillMount()内进行API调用。任何帮助表示赞赏。

Answer 1

您的组件首次呈现this.state.user是null，对吗？这就是你在构造函数中设置的内容。因此，this.state.user.fullName相当于null.fullName会崩溃。

您需要使初始状态代表user对象的形状，或者在渲染组件之前需要进行空检查：

render() {
  return (
    <div className="header">
      {this.state.user && // <-- check if truthy
        <Masthead user={this.state.user.fullName} />
      }
      <PrimaryNav />
    </div>
  )
}

因为您正在执行ajax请求，您还可以利用此机会显示加载指示符：

render() {
  return (
    <div className="header">
      {!this.state.user && // <-- if user is still null
        <div>Loading...</div>
      }

      {this.state.user && // <-- check if truthy
        <Masthead user={this.state.user.fullName} />
      }
      <PrimaryNav />
    </div>
  )
}

Answer 2

在初始渲染时，this.state.user为null，并且您试图从fullname对象获取null属性，因此您会收到错误。

要修复此问题，请将第B行更改为：

{this.state.user && <Masthead user={this.state.user.fullName} />}

State在React中的渲染函数内置零

2 个答案: