React Typescript fetch: useState UseEffect pokeapi

Question

我正在尝试学习如何在React中获取数据并以表格/列表/图形的形式显示。

我提取了一个组件的fetch，虽然我可以让列表出现，但我认为这是错误的-为什么以及如何修复？

// getData.tsx
import React, { useState, useEffect } from 'react';
    
let myArray: string[] = [];
export default function GetData() {  
    const [info, setData] = useState([]);
    
    useEffect(() => {
        getMyData();
    }, []);
    
    const getMyData = async () => {
        const response = await fetch('https://pokeapi.co/api/v2/type')
        const data =await response.json();
        //console.log(data.results)
        for (var i = 0; i < data.results.length; i++) {     
            myArray.push(data.results[i].name)   
            setData(data.results[i].name)
        }
        console.log(info)
    }
   
    return (
        <div>
            <h1>get Data</h1>
           {myArray.map((value,index) => {
               return <li key={index}>{value}</li>;
           })}
        </div>
    )
}

也是同样的问题，但不明白为什么名称和数组不能同时工作？

export default function GetData(){
    const names: string[] = ["whale", "squid", "turtle", "coral", "starfish"];
        
    const theArray: string[] = [];
        
    const getData = async () => {
        const response = await fetch('https://pokeapi.co/api/v2/type');
        const data = await response.json()
        
        //for (var i = 0; i < data.results.length; i++) {  
        for (var i = 0; i < 5; i++) {  
            theArray.push(data.results[i].name)
        }
        console.log(theArray)
    }
        
    console.log(names)
    console.log(theArray)
    
    getData()
        
    return (
        <div>
            <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
            <h1>get Data</h1>
            <ul>{theArray.map(name => <li key={name}> {name} </li>)}</ul>
        </div>
    )
}

Answer 1

您没有使用状态数据...问题是。

正确的方法是：

const [data, setData] = useState([])
useEffect(() => {
  fetch('https://pokeapi.co/api/v2/type')
  .then(res => res.json())
  .then(setData)
},[])

return <div>
 <ul>
  {data.map((name) => <li key={name}>{name}</li>}
 </ul>
</div>

Answer 2

问题是getData被声明为async函数。这意味着它将返回Promise，您可以对其执行await操作并获得结果。但你从来没这么做过。您在没有使用await的情况下使用它，本质上不是等待它完成并丢弃它的结果。

要获得async函数的结果，您应该对其执行await操作。在您的第二个组件中，您必须编写以下代码：

    ...
    console.log(names)
    console.log(theArray)
    
    await getData() // add 'await' to well... wait for the result of the getData execution
        
    return (
    ...

但是你也只能在async函数中使用await。就我而言，您现在不能使用async组件(react@16-17)。因此，第二个组件不会按预期工作。至少在react能够支持async组件之前。

尽管您的第一个组件也存在一些问题。

let myArray: string[] = [];

在模块作用域中声明，它将在组件的所有实例之间共享(而不是重置)。这可能(也将)导致非常意想不到的结果。

此外，在声明getMyData之前，使用它不会得到linting错误，这是很不寻常的。但我认为这只是复制粘贴代码到SO的一个伪像。

另一个问题是你在你的组件中使用setData，不是用来设置myArray的内容，而是用来触发rerender。这是非常脆弱的行为。您应该直接设置新状态，react将触发下一次呈现，并将使用更新后的状态。

为了正常工作，你的第一个组件应该写成：

import React, { useState, useEffect } from 'react'
    
export default function GetData() {  
    const [myArray, setMyArray] = useState([])
    
    const getMyData = async () => {
        const response = await fetch('https://pokeapi.co/api/v2/type')
        const data = await response.json()
        const names = data.results.map((r) => r.name) // extracting 'name' prop into array of names

        setMyArray(names)
    }

    useEffect(() => {
        getMyData();
    }, []);
   
    return (
        <div>
            <h1>get Data</h1>
            {myArray.map((value,index) => (
                <li key={`${index}-${value}`}>{value}</li>
            ))}
        </div>
    )
}