javascript 添加异步并在for循环内等待时出错

vkc1a9a2 于 2023-01-01 发布在 Java

关注(0)|答案(2)|浏览(103)

为什么当我在for-loop里面添加await的时候，它会抛出错误？我应该怎么修复它？

export default async function DetailsViewer({
}) {

  const galleryList = [];
  const metadata = []

  const [data, setData] = useState()

  useEffect(() => {

    const getNFTDetails = async () => {
      fetch("http://localhost:4000/getDetails").then(response => {
        return response.json()
      })
        .then(posts => {
          setData(posts)

        })
        .then((err) => {
          console.log(err);
        })
    }
    getNFTDetails()
  }, []);

  for (const a in data) {
    metadata[a] = await fetchIPFSJSON(data[a].uri);
    if (metadata[a].image) {
      metadata[a].image = makeGatewayURL(metadata[a].image);
    }
    galleryList.push(
      <Card
        style={{ width: 200 }}
        key={data[a].name}
        title={
          <div>
            {data[a].name}{" "}
            <a
              target="_blank"
              rel="noreferrer"
            >
              {/* <LinkOutlined /> */}
            </a>
          </div>
        }
      >
        <img src={data[a].image} style={{ maxWidth: 130 }} />
      </Card>,
    );
  }
  return (

    <div style={{ maxWidth: 820, margin: "auto", marginTop: 32, paddingBottom: 256 }}>

      <StackGrid columnWidth={200} gutterWidth={16} gutterHeight={16}>
        {galleryList}
      </StackGrid>
    </div>
  )
}

- 错误**

错误：对象作为React子级无效（找到：[object Promise]）中。如果要呈现子级集合，请改用数组。在NFTViewer（位于App. jsx：271）中在Route（位于App. jsx：270）中在Switch（位于App. jsx：261）中在Router（由BrowserRouter创建）中在BrowserRouter（位于App. jsx：242）中在div（位于App. jsx：239）中在App（位于src/index. jsx：25）中在ThemeSwitcherProvider（位于src/index. jsx：24）中在ApolloProvider（位于src/index. jsx：2）中

JavaScript

来源：https://stackoverflow.com/questions/74958939/get-error-when-added-async-and-await-inside-for-loop

2条答案

按热度按时间

nr9pn0ug1#

您应该声明一个单独的async函数，在data更改时触发。
此外，galleryList应该是一个状态，以便页面在填充时重新呈现：

export default function DetailsViewer({}) {
  const metadata = {};

  const [galleryList, setGalleryList] = useState([]);
  const [data, setData] = useState([]);

  useEffect(() => {
    const getNFTDetails = async () => {
      try {
        const response = await fetch('http://localhost:4000/getDetails');
        const posts = await response.json();
        setData(posts);
      } catch (err) {
        console.log(err);
      }
    };
    getNFTDetails();
  }, []);

  useEffect(() => {
    handleData();
  }, [data]);

  const handleData = async () => {
    const list = [];
    for (const a in data) {
      metadata[a] = await fetchIPFSJSON(data[a].uri);
      if (metadata[a].image) {
        metadata[a].image = makeGatewayURL(metadata[a].image);
      }
      list.push(
        <Card
          style={{ width: 200 }}
          key={data[a].name}
          title={
            <div>
              {data[a].name}{' '}
              <a target='_blank' rel='noreferrer'>
                {/* <LinkOutlined /> */}
              </a>
            </div>
          }
        >
          <img src={data[a].image} style={{ maxWidth: 130 }} />
        </Card>
      );
    }
    setGalleryList(list);
  };

  return (
    <div
      style={{
        maxWidth: 820,
        margin: 'auto',
        marginTop: 32,
        paddingBottom: 256,
      }}
    >
      <StackGrid columnWidth={200} gutterWidth={16} gutterHeight={16}>
        {galleryList}
      </StackGrid>
    </div>
  );
}

赞(0）回复(0）举报 2023-01-01

5cnsuln72#

useEffect(() => {

    const createGalleryList= async () => {
      for (const a in data) {
    metadata[a] = await fetchIPFSJSON(data[a].uri);
    if (metadata[a].image) {
      metadata[a].image = makeGatewayURL(metadata[a].image);
    }
    galleryList.push(
      <Card
        style={{ width: 200 }}
        key={data[a].name}
        title={
          <div>
            {data[a].name}{" "}
            <a
              target="_blank"
              rel="noreferrer"
            >
              {/* <LinkOutlined /> */}
            </a>
          </div>
        }
      >
        <img src={data[a].image} style={{ maxWidth: 130 }} />
      </Card>,
    );
  }
    }
    createGalleryList()
  }, [data]);

创建新的useEffect并在数据改变时调用galleryList创建变量。不要在默认函数中使用async并等待打开。使用galleryList作为状态变量，当数据改变时它会呈现。

赞(0）回复(0）举报 2023-01-01

我来回答

javascript 添加异步并在for循环内等待时出错

2条答案

相关问题

热门标签

最新问答