网络查询后我无法渲染图像

Question

使用解析，我正在查询数据库并获取imageURL。 React没有更新dom。

componentWillMount和普通大括号。

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>
}

我最终打算将字符串放入图像标签中，我只需要首先获得此渲染即可。

Answer 1

您的函数是异步的，因此setState不会等待，并且会呈现 undefined 。

要解决此问题，您应该返回一个诺言，并用.then()来使用它，并在那里设置状态。您还应该使用window.localStorage.getItem()，而不是立即尝试访问属性。

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

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>
    );
  }
}