Json placeHolder API - 获取数据白色条件

Question

2 天来，我一直在尝试使用 Json PlaceHolder API 和 nextJS 将我的帖子集成到我的用户 table 中。我似乎找不到正确的逻辑，经过多次尝试和搜索后，我需要一些帮助。

我尝试了 filter() 方法，但这个方法对我来说似乎不太传统。我相信有一个非常简单的条件方法，但我无法将它集成到我的 map()

export default function Home() {
  //State
  const [users, setUsers] = useState([]);
  const [posts, setPosts] = useState([]);

  //Get Users
  useEffect(() => {
    const url = `https://jsonplaceholder.typicode.com`;
    axios
      .get(`${url}/users`)
      .then((response) => setUsers(response.data));
    axios
      .get(`${url}/posts`)
      .then((response) => setPosts(response.data));
  }, []);

  const listPost = posts.filter((post) => {
    const listUser = users.filter((user) => {
      if (post.userId === user.id) console.log('matching post');
      else {
        console.log('undefined post');
      }
    });
  });
  return (
    <div>
      <main className='container'>
        <table className='rwd-table'>
          <thead>
            <tr>
              <th>id</th>
              <th>name</th>
              <th>username</th>
              <th>post-userId</th>
            </tr>
          </thead>
          <tbody>
            {users.map((user) => (
              <tr key={user.id}>
                <td>{user.id}</td>
                <td>{user.name}</td>
                <td>{user.username}</td>
                <td></td>
              </tr>
            ))}
          </tbody>
        </table>
      </main>

      <footer>
      </footer>
    </div>
  );
}

Answer 1

看来你想 associate 用户发帖，几件事。

您可能不需要在状态上同时设置用户和帖子（即 2 个 setStates），但您可以将它们合并在一起，这样您最终会得到像 { id: number, name: string, ..., posts: Array<Post> } // this is a user 这样的数据结构，这就是你在找

奖金：

由于帖子和用户 API 调用不相互依赖，您可以同时进行这 2 个调用，请参阅

const [users, posts] = await Promise.all([
  fetchAxiosData("users"),
  fetchAxiosData("posts")
]);

制作fetchAxiosData让你不用担心组件级别的 HTTP 层
添加error和isFetching状态，如果有错误或者你正在加载它总是好的（注意：一些库像swr or react-query 已经为你处理过了，你可能想看看)

我将 UI 实现留给您，不确定您希望如何显示 table 上的帖子，也许只是标题？

你可以做到<td>{user.posts.map(({ title }) => title).join(", ")}</td>

这里有 Codesandbox 给你玩

Json placeHolder API - 获取数据白色条件

Json placeHolder API - Fetch Data white condition

api

reactjs

axios

next.js

jsonplaceholder