Как я могу сделать вызов API в методе map, который визуализирует dom-узлы?

Question

Я пытаюсь использовать обещание внутри моего метода карты, но в ответе из обещания отображается [обещание объекта].Но в коде, где я дал обещание, я возвращаю response.data.itemThatIWant.Как я могу получить фактические результаты по обещанию в моем методе карты?

Я попытался вызвать обещание вне карты и сохранить результаты в массиве, а затем отобразить этот массив внутри карты, но затем я получаю дубликаты всего.

Вот код, который пытается вызвать обещание на карте

<Grid className={classes.listGrid} container>
                {favoriteProviders.map((provider, index) =>

                  <Grid item lg={6} xs={12} key={index} value={index}>

                    <Paper className={classes.paper}>
                      <Grid container direction="row">
                        <img src={`https://animasds-content.azureedge.net/provider-images/${getImagePath(provider.doc_id)}?${Date.now()}`}
                          alt="doctor" style={{ margin: 5, height: 60, borderRadius: 5 }} />

Вот обещание, которое я создал:

import axios from "axios";

async function getImagePath(id) {
    try {
        const res = await axios.post(`${process.env.REACT_APP_API_URL}/api/provider/image/img`, { id },
            {
                headers: {
                    authorization: `Bearer ${localStorage.getItem("access_token")}`
                }
            })
        return res.data.ImagePath
    } catch (err) {
        console.log(err)
    }
}
export default getImagePath;

Если я добавлю console.log (res.data.ImagePath) я получаю то, что хочу, но на карте я просто получаю [обещание объекта]

Я ожидаю, что изображение будет отображаться на основе информации от каждого элемента в массиве, который я отображаю.

Answer 1

Вам необходимо отследить состояние этого getImagePath , когда оно не готово, вы должны отрендерить что-то еще, например

{this.state.images[imageId] ? <img src={`https://animasds-content.azureedge.net/provider-images/${this.state.images[imageId]}?${Date.now()}`}
                          alt="doctor" style={{ margin: 5, height: 60, borderRadius: 5 }} /> : <Something to indicate not ready />

И вы можете обработать состояние готовности, когда получите результат, например

async componentDidMount() {
  try {
    const response = await getImagePath(XXXXXX);
    if (!response.ok) {
      throw Error(response.statusText);
    }
    const json = await response.json();
    this.setState({ images: {id: json} });
  } catch (error) {
    console.log(error);
  }
}

Answer 2

Обычно это было бы <img src={"https://animasds-content.azureedge.net/provider-images/${await getImagePath(provider.doc_id)}?${Date.now()}"}

, но я думаю, что рендер не может быть асинхронным, поэтому вам придется сделать это в каком-то методе жизненного цикла и установить его в состояние, может быть.

Поэтому я предлагаю:

class ApiImg extends Component {

  state = {};

  async componentDidMount() {
    this.setState({ url: await getImagePath(this.props.id)});
  }

  render() { 
    {this.state.url &&
       <img src={`https://animasds-content.azureedge.net/provider-images/${this.state.url}?${Date.now()}`}
         alt="doctor" style={{ margin: 5, height: 60, borderRadius: 5 }} />
    }
  }
}

, используя это так:

<Grid container direction="row">
    <ApiImg id={provider.doc_id} />