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

Question

对于这个项目，我试图传输我从 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;```

Answer 1

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

解构 AlbumList.js 中的道具

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

（即 } 应该出现在 albums 属性之后）。

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

Why is the API data not transferring to my other module? React

api

asynchronous

reactjs

use-effect

use-state