Question

正在学习reactjs，并尝试使用async-await通过axios get调用从api加载一系列用户。拨打电话后，我便将这些用户作为道具传递给另一个称为“个人档案”的组件。 Profiles组件仅遍历所有用户，并为数组的每个元素呈现一个Profile组件。

我只是通过直接在代码（模拟数据）中直接传递用户数组，而没有实际进行异步等待调用。工作正常。我知道我对这里的诺言概念不了解。

const Profile = (props)=>{
  return (
    <div className='profileInfo'>
      <img src={props.avatar}/>
      <h6>{props.first_name},{props.last_name}</h6>
    </div>
  );
}
const Profiles = (props)=>{
  return (
    <div>
      {props.users.map(user=><Profile key={user.id} {...user}/>)}
    </div>
  );
}
class App extends React.Component{
  getUsers = async ()=>{
    const resp = await axios.get('https://reqres.in/api/users');
    return resp.data.data;
  }
  const userArray= this.getUsers();
  render(){
    return( <div>
      <Profiles users={this.userArray}/>
    </div>
      );
  }
}

ReactDOM.render(<App/>,mountNode);

我希望看到呈现的用户资料。但是却出现以下错误： TypeError：props.users.map不是函数 react-dom.development.js：17252组件中发生了以上错误：在个人资料中（由App创建）在div中（由App创建）在应用程序中

考虑将错误边界添加到树中以自定义错误处理行为。

设置状态后有效的代码：

const Profile = (props)=>{
  return (
    <div key={props.id} className='profileInfo'>
      <img src={props.avatar}/>
      <h5>{props.first_name}</h5>
    </div>
  );
}
class Profiles extends React.Component{
  state = {
    users:[],
  };
  getUsers = async ()=>{
    const resp = await axios.get('https://reqres.in/api/users')
    this.setState({users:resp.data.data});
  }
  render(){
    this.getUsers();
    return(
      <div>
        {this.state.users.map(user => <Profile {...user}/>)}
      </div>
    );
  }
}
const App=()=>{
  return (
    <div>
      <Profiles />
    </div>
  );
}
ReactDOM.render(<App/>,mountNode);

如何在React JS中迭代通过异步等待调用返回的数组

0 个答案: