时间戳

首页 > 解决方案 > 获取后无法访问对象数组的属性

javascript - 获取后无法访问对象数组的属性

问题描述

我获取一些 JSON，将其添加到状态（成为对象数组），然后尝试控制台记录状态。我能够成功地控制台记录数组和数组中的一个对象，但是当我尝试记录其中一个对象的属性时，它会引发错误。为什么是这样？

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch(
      "https://my-json-server.typicode.com/typicode/demo/db" //test json data
    )
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.posts);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);
  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    console.log(items); //works
    console.log(items[1]); //works
   //console.log(items[1].id); //Cannot read property 'id' of undefined
    return <div></div>;
  }
}

ReactDOM.render(
  <React.StrictMode>
    <h1> Test </h1>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

标签： javascriptreactjsfetch

解决方案

成功收到结果后，交换setIsLoaded(true)并setItems(result.posts)解决了我的问题。仍然很好奇为什么 setStates 的顺序会导致错误。

推荐阅读