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

Question

在实现分页时，我有一个useState变量，随着页码的更改而改变，下面是我使用两个useEffects调用分页数数据和pagenumber+1来检查它是否抛出404的代码，以便知道何时停止显示next按钮。

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.
2. { charactersData.length===0 &}的catch块中.

如果url有一个比可用分页大的分页数，我添加了这些行来添加404页。当我这样做时，我会发现一个错误：

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

奇怪的是，我没有看到这个错误，直到我更改url 3-4次。

Answer 1

你在一个catch块中改变你的状态，这不是你应该如何改变你的状态。相反，我认为最好尝试使用空数组初始化状态，以便length属性始终存在，从而删除错误。这样的事情是可以这样做的：

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

或使用charactersData的类型(yay类型记录)

const [charactersData, setCharactersData] = useState<charactersDataType>([]);

Answer 2

这是因为您使用了Pascal套管，在您的获取块中使用了Pascal套管，而在返回块中使用了camelcasing。

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>}