Как отобразить base64 внутри карты l oop (предположение) в ReactJS

Question

У меня есть REST API, который возвращает изображение при запросе с именем файла url + (плюс), и я хочу отобразить его в столбце изображения в таблице.

Я использую:
ax ios 0.18.0
Reactionj 16.13.0
Reaction- bootstrap -table2-toolkit 1.3.1

Мое предположение состоит в том, что response- bootstrap -table2-toolkit работает как функция карты.

У меня есть столбец, который будет отображать изображение следующим образом:

{
      dataField: 'img_url',
      text: 'Image',
      formatter: (cell, row) => {
        let renderPosts = async () => {
          try {
            let res = await axios.get('https://myApiUrl:6601/'+cell,{
              responseType: 'arraybuffer' 
            });
            let posts = _imageEncode(res.data);
            console.log(posts)
            return <img src={`data:image/jpeg;base64,${posts}`} />
          } catch (err) {
            console.log(err);
          }
        }

        return renderPosts()
      } 
    },

Но я получил ошибку например:

Объекты недопустимы как дочерние элементы React (найдено: [обещание объекта]). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.

UPDATE

Я изменил метод выше. делая эту функцию вне функции render ()

getImg = async (cell) => {
    try {
      let res = Promise.resolve(axios.get('https://myApiUrl:6601/'+cell,{
              responseType: 'arraybuffer' 
            }));
      return res.then(res=>{
        let mimetype="image/jpeg"
        let x =`data:${mimetype};base64,${btoa(String.fromCharCode(...new Uint8Array(res.data)))}`
        console.log(x)
        return x
      })
    } catch (err) {
      console.log(err);
    }
  }

, тогда я использую функцию getImg () внутри formatter вот так

{
      dataField: 'img_url',
      text: 'Image',
      formatter: (cell, row) => {
        let x = async () => await this.getImg(cell)
        return <img src={`${x()}`} />
      },
    },

но я получил [объект Обещание] так:

Я имею в виду просто хочу получить строку результата из преобразования в base64

Я все еще новичок в этой проблеме,
надеюсь, вы можете помочь, спасибо:)

Answer 1

Я вижу 2 проблемы в вашем обновленном методе.

Во-первых, getImg не возвращает обещание. Вы используете Promise.resolve, но Promise.resolve должен вызываться в конце функции с return, поэтому вы не можете присоединить .then к нему. Кроме того, если вы используете async, то никакой синтаксис Promise не требуется. Измените getImg на следующее:

getImg = async (cell) => {
  try {
    let res = await axios.get('https://myApiUrl:6601/'+cell,{
      responseType: 'arraybuffer' 
    });
    let mimetype="image/jpeg"
    let x =`data:${mimetype};base64,${btoa(String.fromCharCode(...new Uint8Array(res.data)))}`;
    console.log(x);
    return x;
  } catch (err) {
    console.log(err);
  }
}

Во-вторых, вы создаете новую функцию для каждого formatter l oop, и она является избыточной. Попробуйте этот код:

dataField: 'img_url',
text: 'Image',
formatter: async (cell, row) => {
  const x = await this.getImg(cell);
  return <img src={`${x}`} />
},

Я рекомендую вам прочитать больше об обещаниях, асинхронных c функциях и (синтаксических) различиях между ними.

Обещания

Asyn c Функции

Обратите внимание, что функция formatter должна ожидать обещания, и я не уверен, что это так.

Дайте мне знать, если у вас есть еще вопросы.