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

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

Brōtsyorfuzthrāx 2月前

53 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)
  • 出现此问题的原因是, productData.products 在获取数据之前,最初未定义。要解决此问题,您可以添加检查以确保在将其映射到 productData.products 之前,productData.products 已存在。

    {productData.products && productData.products.map(...)} 或者你也可以使用

    { productData?.products.map(...)}

  • 我正在尝试制作西班牙电视节目 Cifras y letras(英国的 Countdown 或法国的 Des Chiffres et des lettres)的游戏。我找到了一个代码,上面列出了所有西班牙语单词

    我正在尝试根据 西班牙的 Cifras y letras 英国的 Countdown Des Chiffres et des lettres )制作一款游戏。多亏了我找到的代码,我才有了一份所有西班牙语单词的列表,这个代码让我能够抓取官方网站。有了这个,我决定创建一个包含所有字母及其常见程度的字典,然后生成一个随机(加权)的 10 个字符的字符串,玩家将尝试从中拼出最长的单词。当我开始用这个 10 个字母的字符串计算最长的单词时,问题就出现了。

    这里的字母( random_string 调用时)是我生成的 10 个字符的字符串, word_list filtered_word )是包含所有字母不超过 10 个的西班牙语单词的列表。

    def find_longest_word(letters, word_list):
        # Sort word_list by length (longest to shortest)
        word_list.sort(key=len, reverse=True)
        
        # Convert word_list to a set for fast lookup
        word_set = set(word_list)
        
        longest_word = ''
        max_length = 0
        
        # Iterate over lengths from len(letters) down to 1
        for length in range(len(letters), 0, -1):
            # Filter word_list to include only words of current length
            filtered_words = [word for word in word_list if len(word) == length]
            # Generate permutations of current length
            for perm in permutations(letters, length): #permutations() given letter set and length gives all permutations
                # The outer for loop will make it so that we start by 10 letter words and after obtaining all permutations of that length we go to 9
                perm_word = ''.join(perm)
                if perm_word in filtered_words:
                   if length > max_length:
                        max_length = length
                        longest_word = perm_word
                        # Exit the loop once the longest word is found
                        return longest_word
        
        return longest_word
    longest_word = find_longest_word(random_string, filtered_words)
    

    这已经执行了 1 小时并且还在继续,我明白我做事的方式有 10!(3.6M)个排列需要与 81.000 个西班牙语单词进行检查(尽管少于这个数字,因为我将 10 个字母的字符串与长度相同的单词进行比较(我不确定这是否会改变任何东西,因为它仍然必须解析每个单词来检查其长度))。

    https://github.com/Albertofma/Letras

  • 谢谢你,你第一次回复就做得很好,效果很好,我没想到你可以像这样直接将检查和地图结合起来。这让我意识到整个组件及其脚本都依赖于这些数据,所以我把所有的脚本和组件都包装在一个 if (props.productData.products) {} 中,效果很好。再次感谢,我认为这非常优雅

  • 在获取数据之前,productData.products 是未定义的。

    替换 productData.products.map productData.products?.map 将会有所帮助。

    在此代码片段中:

    `const fetchData = async() => {
        fetch('https://dummyjson.com/products?limit=0')
          .then((res) =>
          res.json())
          .then((response) => {
          console.log(response);
          getproductData(response);
        })
      }`
    

    我认为 getproductData(response.data) 是正确的。谢谢。

  • 谢谢你,这个方法有效,老实说,这个操作不是我用过或听说过的,其他人的更多信息在这里:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

  • 算法方面有几件事可以帮助你……

    如果您坚持使用现有代码,则应该进行 filtered_words set 您正在对包含 80K 个元素的列表进行 3.6M 次查找,这会很慢。如果失败,您将对 P(10,9) 等进行另外 3M 次以上的查找。

    考虑事先对单词进行“工作”(如下所示)。如果您对每个可测试的 ~80K 个单词中的字母进行排序(这对于小型列表来说非常快),那么您可以避免对示例字母进行排列,并且只需要进行几百次(最多)比较,因为您可以使用 组合 并进行排序。与排列总和相比,sum(C(10,10)=1 , C(10,9) = 10 , C(10, 8) = 45, ... ) 微不足道。

    您的代码的这个修改在不到一秒的时间内运行:

    import random #To make the random string given to the player
    
    from collections import Counter, defaultdict
    from itertools import permutations, \
        combinations  # For obtaining all permutations for a 10 letter set
    # Define the file path
    file_path = 'palabras.txt'
    
    #Dictionary with accented letters and their unaccented counterparts to be replaced by
    accented_to_unaccented = {
        'é': 'e', 'í': 'i', 'ú': 'u', 'á': 'a', 'ó': 'o', 'ü': 'u', 'è': 'e'
    }
    
    # Initialize an empty list to store the filtered words
    filtered_words = defaultdict(list)
    
    #Function to replace accents in how common the letters are
    def replace_accented_letters(word):
        return ''.join(accented_to_unaccented.get(char, char) for char in word) #This will parse all the words in the file and replace the first char in the dict (the accented one) with the solution
    
    # Open and read the file
    with open(file_path, 'r', encoding='utf-8') as file:
        # Read each line (word) in the file
        for line in file:
            if len(line) > 10:
                continue
            # Strip any leading/trailing whitespace, force lowercase and check the word length
            word = line.strip().lower()
            word = replace_accented_letters(word) #Call function to replace accents
    
            filtered_words[''.join(sorted(word))].append(word)
    
    
    def find_longest_word(letters, word_list: dict):
    
        longest_word = []
        
        # Iterate over lengths from len(letters) down to 1
        for length in range(len(letters), 0, -1):
            for sample in combinations(letters, length): # Filter word_list to include only words of
                sorted_letters = ''.join(sorted(sample))
                matches = word_list.get(sorted_letters, None)
                if matches:
                    return matches
    
        return None
    
    random_string = ''.join(random.sample('abcdefghijklmnopqrstuvwxyz', 10))
    #Use the longest word function
    longest_word = find_longest_word(random_string, filtered_words)
    
    print(f"La palabra mas larga de las letras random '{random_string}' posible era:  {longest_word}")
    
  • {productData.length > 0 && productData.products.map(...)}

  • 您已经使用过 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='')
    

    在线尝试!

返回
作者最近主题: