从reader.onload和axios返回值以显示reactjs

mspsb9vt  于 2023-05-17  发布在  React
关注(0)|答案(1)|浏览(125)

有一个数组,它按元素的数量显示数据,每次callapi接收到作为blob的类型,将其传递给fileReader并返回数据以呈现组件,但数据不显示

export default function App() {
  const arr = [
    { name: "A", id: 1 },
    { name: "B", id: 2 },
    { name: "C", id: 3 }
  ];

  const Render = () => {
    return arr.map((item) => {
      const fetchAttachment = async () => {
        try {
          const res = await axios.get(`apiURL/${item.id}`, {
            responseType: "blob",
            headers: defaultHeader
          });

          let reader = new window.FileReader();
          reader.readAsDataURL(res.data);
          reader.onload = () => {
            let link = reader.result;
            return link;
          };
        } catch (error) {
          console.log(error);
        }
      };
      const linkview = fetchAttachment();

      return <Item linkview={linkview} />;
    });
  };

  return (
    <div className="App">
      <Render />
    </div>
  );
}

export function Item({ linkview }) {
  return (
    <div>
      <p>{linkview}</p>
    </div>
  );
}
q5iwbnjs

q5iwbnjs1#

你正在犯一些错误。
1.您在fetchAttachment()函数中没有返回reader或reader结果
1.fetchAttachment()是异步函数,因此返回的数据是pending promise。因此,您可以使用**.then()来获取数据。
1.您在未提供键的情况下呈现ListView组件。如果没有键,你会得到一个类似“应该为列表项提供键”的警告。
1.还有一件事,我注意到,您在axios请求中使用了
“apiURl”作为字符串**。我认为它是一个具有URL的变量。
下面是更新后的代码。试试这个:

export default function App() {
  const arr = [
    { name: "A", id: 1 },
    { name: "B", id: 2 },
    { name: "C", id: 3 }
  ];

  const Render = () => {
    return arr.map((item, index) => {
      const fetchAttachment = async () => {
        try {
          const res = await axios.get(`${apiURL}/${item.id}`, {
            responseType: "blob",
            headers: defaultHeader
          });

          let reader = new window.FileReader();
          reader.readAsDataURL(res.data);
          reader.onload = () => {
            let link = reader.result;
            return link;
          };

          // Return the result of reader
          return reader.result;
        } catch (error) {
          console.log(error);
        }
      };

      // As the function retrun a promise, use then() to get the value
      fetchAttachment(index).then((linkview) => {
        console.log(linkview);
        return <Item key={index} linkview={linkview} />;
      });
    });
  };

  return (
    <div className="App">
      <Render />
    </div>
  );
}

export function Item({ linkview }) {
  return (
    <div>
      <p>{linkview}</p>
    </div>
  );
}

希望对大家有帮助。

相关问题