时间戳

首页 > 解决方案 > 为什么 API 数据没有传输到我的其他模块？反应

reactjs - 为什么 API 数据没有传输到我的其他模块？反应

问题描述

对于这个项目，我正在尝试传输从 API 收到的数据（专辑列表）并将它们发送到另一个模块，以便根据选择的用户显示结果。我将“useEffect()”与“setAlbums()”函数结合使用，通过标有“album”的道具设置和发送专辑列表数据。问题是我没有收到其他模块“AlbumList.js”中的数据，所以我无法显示用户的专辑列表。任何人都可以找到解决方案吗？请原谅所有的日志，我是使用 React 的新手，并且一直在尝试解决这个问题。非常感谢您抽出宝贵时间。

这是 App.js 文件：

// App.js
import "./App.css";

import AlbumList from "./AlbumList";
import UserList from "./UserList";

function App() {
  const controller = new AbortController();
  const [users, setUsers] = useState([]);
  const [user, setCurrentUser] = useState({});
  const [albums, setAlbums] = useState([]);
  document.title = 'Awesome Album App';

  const userUrl = "https://jsonplaceholder.typicode.com/users";

  // Loading Albums
  useEffect(() => {
    const albumUrl = `https://jsonplaceholder.typicode.com/albums?userId=${user.id}`;
    async function loadAlbums() {
      try {
        const response = await fetch(albumUrl, { signal: controller.signal });
        const json = await response.json();
        console.log("Logging json: ", json)
        setAlbums(json)
      } catch (err) {
        if (err.name === 'AbortError') {
          console.log('Aborted', err)
        } else {
          throw err;
        }
      }
    }
    loadAlbums();
    console.log("After loadAlbums: ", albums)
    return () => {
      controller.abort();
    }
  },[user])
  
  // Loading Users
  useEffect(() => {
    async function loadUser() {
      try {
        const response = await fetch(userUrl, { signal: controller.signal });
        const data = await response.json();
        setUsers(...users, data);
      } catch (err) {
        if (err.name === 'AbortError') {
          console.log('Aborted', err)
          setUsers([])
        } else {
          throw err;
        }
      }
    }
    loadUser();
    return () => {
      controller.abort();
    }
  },[])

  // Return JSX
  return (
    <div className="App">
      <div className="left column">
      <UserList users={users} setCurrentUser={setCurrentUser} />
      </div>
      <div className="right column">
        <AlbumList user={user} album={album} />
      </div>
    </div>
  );
}

export default App;

这是显示相册的组件：

// AlbumList.js
import React from "react";

function AlbumList({ user = {} }, albums) {
  console.log("Logging inside of albumsList", albums)
  if (albums.length) {
    return albums.map((album, index) => {
      return <li key={index}>{album.id}{album.title}</li>;
    });
  }
  return (
    <div>
      <p>Please click on a user name to the left</p>
    </div>
  );
}

export default AlbumList;```

标签： reactjsapiasynchronoususe-effectuse-state

解决方案

是因为您在应该传递album={album}给<AlbumList />组件的时候传递给它albums={albums}吗？当您将代码传输到 Stack Overflow 时，我不确定这是否只是一个错误，但<AlbumList/>在albums您传递一个道具时需要一个album道具。不过，我很好奇为什么编译器没有album因为未定义而抛出错误——据我所知，你只albums定义了变量。另外，我相信您需要像这样解构 AlbumList.js 中的道具

function AlbumList({ user = {} , albums}) {

（即}应该出现在albums道具之后）。

推荐阅读