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

Question

我正在实现分页，我有一个 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 部分：

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

在我添加以下行之前，它工作正常：

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

如果 url 的页码大于可用页码，我添加了这些行以添加 404 页面。当我这样做时，我收到一条错误消息：

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

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

Answer 1

是否因为您在获取块时使用了 Pascal 大小写，而在 return 块中使用了驼峰式大小写...？

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

Answer 2

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

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

或者用字符类型Data (yay typescript)

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

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

My useState variable throws cannot read length of undefined

javascript

reactjs

react-hooks

use-effect

use-state