8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

如何在 fetch 完成后运行 map() React

Brōtsyorfuzthrāx 2月前

55 0

我正在尝试获取数据,然后让我的 React App 映射数据以在页面上呈现每个产品。但是它无法找到执行 .map() 的数据,我认为这是因为

我正在尝试获取数据,然后让我的 React App 映射数据以在页面上呈现每个产品。

但是,它无法找到执行该操作的数据 .map() ,我认为这是因为 fetch 当它开始寻找数据时该操作尚未完成。

我怎样才能告诉地图在数据获取后发生?下面是我的代码尝试使其工作的示例:

import React, { useState, useEffect } from 'react'


const App = () => {

  const [productData, getproductData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);
  
  const fetchData = async() => {
    fetch('https://dummyjson.com/products?limit=0')
      .then((res) =>
      res.json())
      .then((response) => {
      console.log(response);
      getproductData(response);
    })
  }
  
  return (
    <div className='products'>
      {productData.products.map(product => (
        <div className='product' key={product.id}>
          <div className='productInfo'>
            <div className='productTitle'>
              <div className='productBrand'>{product.brand}</div> 
              <div className='productName'>{product.title}            </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

export default App
帖子版权声明 1、本帖标题:如何在 fetch 完成后运行 map() React
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Brōtsyorfuzthrāx在本站《loops》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 您已经使用过 Counter,您也可以在这里使用它:

    def find_longest_word(letters, word_list):
        letters = Counter(letters)
        word_list.sort(key=len, reverse=True)
        for word in word_list:
            if Counter(word) <= letters:
                return word
        return ''
    

    或者

    def find_longest_word(letters, word_list):
        letters = Counter(letters)
        return max((
            word
            for word in word_list
            if Counter(word) <= letters
        ), key=len, default='')
    

    在线尝试!

返回
作者最近主题: