开发者问题收集

我的 useState 变量抛出无法读取未定义的长度

2022-03-28
773

我正在实现分页,其中我有一个 useState 变量,我会随着页码的变化而更改该变量,下面是我使用两个 useEffects 来调用 pagenumber 和 pagenumber+1 的数据来检查它是否抛出 404 的代码,这样我就知道什么时候停止显示下一个按钮。

useEffect(() => {
    
        async function fetchData() {
            try {
                const baseUrl = 'https://gateway.marvel.com:443/v1/public/characters';
                const url = baseUrl + '?ts=' + ts + '&apikey=' + publickey + '&hash=' + hash+ '&limit=100&offset='+parseInt(pageNumber)*50;
                const { data } = await axios.get(url);
                setCharactersData(data.data.results);
                setLoading(false);
            } catch (e) {
                setCharactersData([]);
                console.log(e);
            }
        }
        
        fetchData();
    }, [ pageNumber ]);


    
    useEffect(() => {
    
        async function fetchData() {
            try {
                const baseUrl = 'https://gateway.marvel.com:443/v1/public/characters';
                const url = baseUrl + '?ts=' + ts + '&apikey=' + publickey + '&hash=' + hash+ '&limit=100&offset='+(parseInt(pageNumber)+1)*50;
                const { data } = await axios.get(url);
                console.log(data);
                setNewData(data.data.results);
                setLoading(false);
            } catch (e) {
                setNewData([]);
                console.log(e);
            }
        }
        
        fetchData();
    }, [ pageNumber ]);

返回部分:

return (
            <div>
                { parseInt(pageNumber)!==0 && <Link className='characterlink1' to={`/characters/page/${parseInt(pageNumber)-1}`}>
                        Previous
                    </Link>}
                    
                    { charactersData.length===0 && <Four />}

                 { newData.length>0 && <Link className='characterlink2' to={`/characters/page/${parseInt(pageNumber)+1}`}>
                        Next
                    </Link>}
            

这一直运行良好,直到我添加了以下几行:

  1. setCharactersData([]); 在第一个 useEffect 的 catch 块中。
  2. { charactersData.length===0 && } 在返回部分。

我添加了这些行,如果 url 的页码大于可用的页码,则添加 404 页面。当我执行此操作时,出现以下错误:

TypeError: Cannot read properties of undefined (reading 'length')

奇怪的是,直到我更改 url 3-4 次后才看到此错误。

2个回答

您正在 catch 块中更改状态,这不是您应该更改状态的方式。相反,我认为最好尝试使用空数组初始化状态,以便 length 属性始终存在,从而消除错误。可以这样做:

const [charactersData, setCharactersData] = useState([]);

或者使用 charactersData 的类型(yay typescript)

const [charactersData, setCharactersData] = useState<charactersDataType>([]);
Daan Hendriks
2022-03-28

是不是因为您在获取块中使用了 Pascal 大小写,而在返回块中使用了驼峰式大小写?

return (
            <div>
                { parseInt(pageNumber)!==0 && <Link className='characterlink1' to={`/characters/page/${parseInt(pageNumber)-1}`}>
                        Previous
                    </Link>}
                    
                    { CharactersData.length===0 && <Four />}

                 { newData.length>0 && <Link className='characterlink2' to={`/characters/page/${parseInt(pageNumber)+1}`}>
                        Next
                    </Link>}
2022-03-28