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

问题描述 投票:0回答:0

有一个数组,按元素个数显示数据, 每次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`, {
            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>
  );
}
reactjs axios filereader
© www.soinside.com 2019 - 2024. All rights reserved.