我的 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>}
这一直运行良好,直到我添加了以下几行:
- setCharactersData([]); 在第一个 useEffect 的 catch 块中。
- { 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