Reactjs 我无法在网络查询后获取要渲染的图像

使用Parse，我查询数据库并返回一个imageURL。React没有更新dom

组件将挂载，并且只有普通的花括号

export const profileImage = async objectId => {
  const query = new Parse.Query(Parse.User);
  query.equalTo("objectId", objectId);
  const image = await query.find();
  console.log(typeof image[0].attributes.image);
  console.log(image[0].attributes.image);

  return image[0].attributes.image; // return image;
}; // Query for a specific user and get image!

我当前导入了它，并且它执行控制台日志，因此函数正在执行，但从未呈现

export default class MyDashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      profilePic: "",
    };
  }
  componentDidMount() {
    this.setState({ profilePic: profileImage(window.localStorage.objectId) });
  }
  render() {
    return (
      <div>
        <Sidebar />
        <div className={style.Componentcontainer} />
        <div className={style.main}>

        </div>
        <div className={style.profile}>
          <div> {this.state.profilePic} </div>
}

我最终计划将字符串放入一个图像标记中，我只需要首先获得该渲染。

您的函数是异步的，因此setState不会等待，将渲染未定义。 要解决这个问题，您应该返回一个承诺，并使用一个.来使用它，然后在那里设置状态。您还应该使用window.localStorage.getItem，而不是尝试立即访问属性

export const profileImage = objectId => {
  const query = new Parse.Query(Parse.User);
  query.equalTo("objectId", objectId);
  return query.find();
};

---

如果我帮助，请考虑标记这个答案解决。如果你还需要帮助，尽管问：好的，我会的。谢谢again@04Tribe没问题：

export default class MyDashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      profilePic: ""
    };
  }
  componentDidMount() {
    profileImage(window.localStorage.getItem(objectId)).then(image => {
      this.setState({ profilePic: image[0].attributes.image });
    });
  }
  render() {
    return (
      <div>
        <Sidebar />
        <div className={style.Componentcontainer} />
        <div className={style.main} />
        <div className={style.profile}>
          <img src={this.state.profilePic} />
        </div>
      </div>
    );
  }
}