javascript - 如何在ReactJS中的 map 循环(假设)内显示base64

Question

我有一个 REST API，当我使用 url +(加号)文件名请求时，它会返回图像，并且我想将其显示在表中的图像列中。

我使用:
axios 0.18.0
react 16.13.0
React-bootstrap-table2-toolkit 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 。您正在使用 Promise.resolve，但 Promise.resolve 应该在函数末尾使用 return 调用，因此您可以' t 将 .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}`} />
},

我建议您阅读更多有关 Promise、异步函数以及两者之间(语法)差异的内容。

Promises

Async Functions

请注意，formatter 函数必须等待 promise ，但我不确定是否会这样做。

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