React中GET请求引发取值报错与无限循环问题求助

1. 解决初始访问content.cnt.boolean报错的问题 #

初始content是空对象，直接访问content.cnt.boolean会因content.cnt为undefined触发报错，可通过两种方式处理：

• 给useState设置贴近接口返回结构的初始值：

  const [content, setContent] = useState({ cnt: {} })
  

• 在渲染时使用可选链操作符做安全访问：

  <p className='text-white' id='text'>{content.cnt?.boolean}</p>
  

2. 解决useEffect无限循环+日志不输出的问题 #

原代码中setContent是异步更新，刚执行完setContent时content还是旧的初始值，因此判断逻辑不会生效；而把content加入依赖会导致每次content更新就重新触发请求，形成无限循环。

正确的做法是直接使用接口返回的res.data做判断，不需要依赖content，同时将请求用到的token和query加入依赖，确保参数变化时才重新请求：

useEffect(() => {
    console.log("useEffect")

    axios.get("http://localhost:88/api/v1/artwork?token=" + token + "&id=" + query.get("id")).then(function (res) {
        setContent(res.data)
        // 直接用接口返回的数据判断，无需依赖state
        if(res.data.cnt.boolean === true) {
            console.log("success")
        }
    })

}, [token, query])

修改后的完整代码 #

const App = () => {
    // 设置更合理的初始值，避免初始访问报错
    const [content, setContent] = useState({ cnt: {} })

    useEffect(() => {
        console.log("useEffect")

        axios.get("http://localhost:88/api/v1/artwork?token=" + token + "&id=" + query.get("id")).then(function (res) {
            setContent(res.data)
            // 直接使用接口返回的数据做判断
            if(res.data.cnt.boolean === true) {
                console.log("success")
            }
        })

    }, [token, query]) // 仅依赖请求参数，避免不必要的重复请求

    return (
        <div>
            {content.cnt?.boolean !== undefined ? (
                <p className='text-white' id='text'>{content.cnt.boolean}</p>
            ) : null}
        </div>
    )
}

内容的提问来源于stack exchange，提问作者user18680403