json - 使用 React hook 获取数据在嵌套 obj 属性上返回未定义

Question

我正在尝试显示已获取的数据。但我似乎无法在 react 中显示嵌套对象属性。有任何想法吗？如果我记录数据，我首先得到一个未定义的数据，然后是正确的数据。我的猜测是我需要等待数据加载然后显示它。但它确实适用于不在嵌套对象中的标题。

function SingleBeneficiary({ match }) {

  const [data, setData] = useState({ data: []});
  const id = match.params.id

  useEffect(() => {
  async function fetchData() {
    const response = await fetch(`http://localhost:8081/v1/beneficiary/${id}`);
    const jsonData = await response.json()
    setData(jsonData)
    }
    fetchData();
  }, [])

  return (
 {data.title} // works
{data.address.careOf} // dont work

数据

{ 
  "title":"myTitle",
  "address":{
    "careOf": "my adress"
  }

}

Answer 1

你可以这样尝试吗？我将初始数据设置为空，作为返回，我检查它是否不为空。如果地址可以为空，则需要额外的空检查。

function SingleBeneficiary({ match }) {

  const [data, setData] = useState(null);
  const id = match.params.id

  useEffect(() => {
  async function fetchData() {
    const response = await fetch(`http://localhost:8081/v1/beneficiary/${id}`);
    const jsonData = await response.json()
    setData(jsonData)
    }
    fetchData();
  }, [])

    return (
      <div>
        {data && (
          <div>
            <p>data.title</p>
            <p>data.address.careOf</p>
          </div>
        )}
      </div>
    );
}