Question

我的状态中有以下对象，我正在尝试访问方括号和项目属性。

这是我尝试访问属性的方法，但是我仅收到“无法访问未定义属性”错误

  function App () {
  const [ladder, setLadder] = useState({})

  useEffect(() => {
    async function fetchMyAPI () {
      try {
        const res = await axios.get(
          'data/wow/pvp-season/27/pvp-leaderboard/3v3?namespace=dynamic-eu&locale=en_US&access_token=12345'
        )
        setLadder(res)
      } catch (error) {
        console.log(error)
      }
    }
    fetchMyAPI()
  }, [])

  return (
    <>
      {console.log(ladder.data.bracket)} // cannot access bracket of undefined ...
      {console.log(ladder.data.entries[0])} // cannot access entries of undefined ...
    </>
  )
}

Answer 1

return (
    <>
      {console.log(ladder?.data?.bracket)}
      {console.log(ladder?.data?.entries[0])}
    </>
  )

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

您还可以使用逻辑AND运算符

return (
    <>
      {console.log(ladder && ladder.data &&  ladder.data.bracket)}
      {console.log(ladder && ladder.data && Array.isArray(ladder.data.entries) && ladder.data.entries[0])}
    </>
  )

您还可以调整梯形图的初始值，并保持渲染代码不变

const [ladder, setLadder] = useState({
  data: {
    entries: []
  }
})

甚至是lodash的获取功能！

return (
    <>
      {console.log(_.get(ladder, "data.bracket"))}
      {console.log(_.get(ladder, "data.entries[0]"))}
    </>
  )

Answer 2

您会收到此错误，因为在第一个渲染（在加载组件时发生）上，状态变量ladder是一个empy对象。仅在获取数据之后，变量才会更新。因此，只要在访问值之前检查ladder.data是undefined，就可以“不呈现任何内容”：

  function App () {
  const [ladder, setLadder] = useState()

  useEffect(() => {
    async function fetchMyAPI () {
      try {
        const res = await axios.get(
          'data/wow/pvp-season/27/pvp-leaderboard/3v3?namespace=dynamic-eu&locale=en_US&access_token=12345'
        )
        setLadder(res)
      } catch (error) {
        console.log(error)
      }
    }
    fetchMyAPI()
  }, [])

  return (
    <>
      {console.log(ladder && ladder.data.bracket)}
      {console.log(ladder && ladder.data.entries[0])}
    </>
  )
}

请注意，我已将初始值更改为undefined，而不是{}。如果出于某种原因愿意将初始值保留为空对象，则可以使用lodash（例如）在渲染之前检查该对象是否为空：

const _ = require('lodash');

  return (
    <>
      {console.log(!_.isEmpty(ladder) && ladder.data.bracket)}
      {console.log(!_.isEmpty(ladder) && ladder.data.entries[0])}
    </>
  )

访问嵌套状态

2 个答案: