Question

使用AXIOS获得JSON数据后，该程序无法读取属性“ TypeError：无法读取属性”

2020-11-20

269

reactjs axios typeerror

我是 React 和 Axios 的新手（大约 1 个月），以下程序尝试从 db.json 中获取字符串并将其放入组件中。但不知何故，出现了 TypeError。

1）我是否错过了有关 Axios 和 React 的一些基本概念？

2）我应该如何修复该问题？

db.json

{
  "listCriteria": {
    "criteriaTitle": "Awaiting Admission: " <---Target
  }
}

react.js

var [listCriteriaOption, setListCriteriaOption] = useState()

    useEffect(() => {
        axios.get(`http://localhost:3001/${props.jsonLink.replace(/ /g,"")}`)
        .then(res => {
            setListCriteriaOption(res.data) <-----save the data in listCriteriaOption
            console.log("object")
            console.log(res.data)
            console.log(res.data.listCriteria.criteriaTitle) <----return "Awaiting Admission: "
        })
        .catch(error => {
            console.log("Error")
            console.log(error)
        })
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

return

<Typography variant="h6" color="initial" style={{fontWeight:"bold",textAlign:"center"}}>
                {listCriteriaOption.listCriteria.criteriaTitle} <-----assume return "Awaiting Admission"
</Typography>

但最终

TypeError: Cannot read property 'listCriteria' of undefined

Answer 1

您错过了一个重要部分，您需要考虑到 HTML 会在您从 api 调用获得响应之前立即呈现的事实。
您可以添加一个加载状态，在从 api 获取时设置 true/false，或者在呈现之前添加一个检查 listCriteriaOption 是否存在的检查，如下所示：

{listCriteriaOption && <Typography variant="h6" color="initial" style={{fontWeight:"bold",textAlign:"center"}}>
                {listCriteriaOption.listCriteria.criteriaTitle} <-----assume return "Awaiting Admission"
</Typography>}

或加载器替代方案：

const [listCriteriaOption, setListCriteriaOption] = useState()
 const [loading, setLoading] = useState()

 useEffect(() => {
        setLoading(true)
        axios.get(`http://localhost:3001/${props.jsonLink.replace(/ /g,"")}`)
        .then(res => {
            setListCriteriaOption(res.data)
            setLoading(false)
        })
        .catch(error => {
            console.error(error)
        })
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])


{loading ? <p>Loading...</p> : <Typography variant="h6" color="initial" style={{fontWeight:"bold",textAlign:"center"}}>
   {listCriteriaOption.listCriteria.criteriaTitle}
</Typography>}