Question

在使用挂钩获取数据时出现以下错误。我有两个功能组件

function TopTen() {
    const [topTen, setTopten] = useState([]);  
    const [loading, setLoading] = useState(true); 
    const [error, setError] = useState(false); 

    useEffect(() => {         
        console.log("useEffect TopTen has been called!");   
        const fetchdata = async () => {
        const response = await api.topTen();  // this calls axios(url)
        setLoading(false);
        setTopten(response.data);    
        setError(response.error);    
    };

    fetchdata ();     
}, []);

  return ( 
        {topTen.length > 0 &&
        <Table 
          tableData={topTen.map((item, idx) => {
            return ([
              item.name
            ]);
          })}
        /> 
        }
    )

}

function Declaraciones() {

    // ... here I'm using other effects also for fetching data 
    const [data, setData] = useState([]);

    useEffect(() => {            
        const fetchData = async () => {
        const response = await api.fetch();
    //...
        };

        fetchData ();     
    }, []);

    return (

        <div>
            <p>{data}</p>
            <TopTen />
        </div>
    )

}

由于某些原因，有时TopTen组件可以正常工作，有时却不能。就像随机的。我看到的是api调用会返回假数据，例如“缓存”，因此当尝试映射结果时会失败：

**TypeError: Cannot read property 'name' of undefined**

也许我缺少useeffect挂钩的概念。

有人知道我该如何解决吗？

谢谢

Answer 1

您必须使用wait response.json（）将响应转换为json。然后使用setState。

useEffect(() => {         
        console.log("useEffect TopTen has been called!");   
        const fetchdata = async () => {
        const response = await api.topTen();  // this calls axios(url)
        const responseData = await response.json();
        setLoading(false);
        setTopten(responseData.data);    
        setError(responseData.error);    
    };

    fetchdata ();     
}, []);

Answer 2

尝试：

setTopten(response.data.filter(function(val){ return val!==undefined; }))

反应useeffect钩子

2 个答案: