如何在 ReactJS 中的地图循环（假设）中显示 base64

Question

我有一个 REST API，当我用 url +（加号）文件名请求时 returns 一个图像，我想在图像列中显示它table.

我使用：
axios 0.18.0
reacj 16.13.0
react-bootstrap-table2-工具包1.3.1

我的假设是 react-bootstrap-table2-toolkit 像 map 函数一样工作。

我有一个列可以像这样呈现图像：

{
      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()
      } 
    },

但是我得到了这样的错误：

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

更新

我改了上面的方法。通过在 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);
    }
  }

然后我在 formatter 中使用 getImg() 函数，就像这样

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

但我得到了这样的 [object Promise]：

我的意思是只想检索转换为 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 循环上创建一个新函数，这是多余的。试试这个代码：

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

我建议您阅读更多有关 promises、异步函数以及两者之间的（语法）差异的信息。

Promises

Async Functions

请注意，formatter 函数必须等待 promise，我不确定它是否如此。

如果您还有其他问题，请告诉我。

如何在 ReactJS 中的地图循环（假设）中显示 base64

How do I display base64 inside map loop(assumption) in ReactJS

javascript

reactjs

axios

react-bootstrap-table

更新