代码之家 › 专栏 › 技术社区 › Tom Brooke

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

use-state use-effect react-hooks reactjs javascript

Tom Brooke · 技术社区 · 3 年前

我正在实现分页,其中有一个useState变量,随着页码的变化而变化,下面是代码,我使用两个useEffects调用pagenumber和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>}

在我添加以下行之前,这一切都很顺利:

setCharactersData([]);在第一次使用效果的捕获块中。
{charactersData.length==0&}在返回部分。

如果url的页码大于可用的页码,我添加这些行是为了添加404页面。当我这样做时,我会得到一个错误,说:

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

奇怪的是,直到我更改了3-4次url,我才发现这个错误。

2 回复 | 直到 3 年前

Daan Hendriks 3 年前

你在一个捕猎区改变你的状态,而这不是你应该如何改变你的状态。相反,我认为最好尝试用空数组初始化您的状态,以便 length 属性始终存在,从而删除错误。可以这样做:

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

或者使用字符数据的类型(yay typescript)

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

Stef-Verniers 3 年前

是因为你在取块时使用了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>}