javascript - 进入 Spotify 阵列

Question

我正在尝试使用 Spotify API 并进入数组。

const App = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [dataSource, setDataSource] = useState();

  useEffect(() => {
    return fetch("https://api.spotify.com/v1/me/albums?offset=0&limit=5", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization:
          "Bearer AUTH CODE "
      }
    })
      .then(response => response.json())
      .then(responseJson => {
        setIsLoading(false);
        // console.log(responseJson);

        // let result = Object.values(responseJson); // if I want to convert it in array
        let result = responseJson
        setDataSource(result);

      });
    }, []);


    console.log(dataSource);

我得到了一个物体

{href: "https://api.spotify.com/v1/me/albums?o`enter code here`ffset=0&limit=5", items: Array(5) ...}

我想讨论一些项目，但是当我这样做的时候

console.log(dataSource.items);

或

console.log(dataSource.items[1]);

我明白

Cannot read property 'items' of undefined

有什么想法吗？我的错误在哪里？

Answer 1

dataSource 状态默认为 undefined，您需要更改默认值以具有 items 属性。 fetch 正在异步处理 then，因此数据将在几毫秒后到达，此时代码会尝试访问缺少的 items 属性。

您可以尝试以不同的方式进行初始化，如下所示:

const [dataSource, setDataSource] = useState({ items: [] });

希望这会有所帮助!