無法使用 react 和 hooks 訪問嵌套的 JSON。 類型錯誤

Question

JSON

這就是 json object 在 state 中的外觀。

{ 
  "gender": "male",
  "name": {
    "title":"Mr."
    "first":"Mike",
    "last": "Wazowski"
  },
  ...
}

反應

const App = () => {
  const [user, setUser] = React.useState([]);

  React.useEffect(() => {
    axios
      .get("https://randomuser.me/api")
      .then((response) => {
        const info = response.data.results[0];
        setUser(info);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []); 

訪問第一個 lvl 數據工作正常

  return (
    <div>
      <h1>Hello, {user.gender}</h1> 
      <h1>Hello, {user.email}</h1> 
    </div>
  )

調用 object 返回 Err: Objects are not valid as a React child

  return (
    <div>
      <h1>Hello, {user.name}</h1>
    </div>
  )           

調用嵌套數據返回 TypeError: user.name undefined error

  return (
    <div>
      <h1>Hello, {user.name.first}</h1>
    </div>
  )

為什么我可以訪問像性別這樣的“一級”數據，但不能訪問像 name.first 這樣的“二級”數據？

我需要一些我不知道的特殊語法嗎？

Answer 1

我相信您的錯誤發生在不同的時間 - 您將 object 初始化為空數組，因此您可以訪問第一級字段（未定義），但不能訪問它們的字段（因此 user.name 未定義）。 然后你填充你的數據， user.name變成 object 並且你不能只在 DOM 中渲染，所以你得到Objects are not valid as a React child 。 要解決這個問題，只需添加一個 null 檢查 - <h1>Hello, {user.name && user.name.first}</h1>

Answer 2

我相信您的代碼的問題在於您正在嘗試使用您的response.data.results[0]而不將其轉換為 JavaScript Object。 那就是來自 API 的響應是 JSON，您需要將其轉換為 JS Object。

您可以在使用之前嘗試將您的response.data.results[0] JSON 解析為 Object 嗎？

這應該有效：

const info = JSON.parse(response.data.results[0]);