如何一次从 rest API 和 localStorage 获取数据？

Question

我正在做的是从我从 https://jsonplaceholder.typicode.com/users 获取的本地存储中加载数据。我正在尝试创建一个反应应用程序，我在其中添加了多个用户作为朋友，就像 facebook 一样。我的朋友列表在名为 UserInfo.js 的文件中，我在下面给出了该代码。然后我尝试通过与我试图从 api 调用中找到的 id 进行比较，来显示与他们的 id 相对应的朋友，这样就可以向我显示匹配的用户。你可以在这里找到我的项目：https://codesandbox.io/s/elastic-dream-mp3is?file=/src/App.js

import React, { useState } from "react";
import "./UserInfo.css";
import { useEffect } from "react";
import fakedata from "../../fakedata";
import { getDatabaseCart } from "../../utilities/databaseManager";

const UserInfo = () => {
  // // using fakedata
  // const [users, setUsers] = useState(fakedata);

  // // declaring state while calling api
  const [users, setUsers] = useState([]);

  // declaring state while loading data from local storage
  const [friends, setFriends] = useState(users);

  // to load data from Api call
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  // to load data from local storage
  useEffect(() => {
    const savedFriends = getDatabaseCart();
    const friendsId = Object.keys(savedFriends);
    const countFriends = friendsId.map((key) => {
      const friend = friends.find((fd) => fd.id == key);
      // console.log(friend);
      return friend;
    });
    setFriends(countFriends);
  }, [friends]);

  // console.log(friends);
  // console.log(users);

  return (
    <div className="userInfo-container">
      <div className="userInfo">
        {friends.map((friend) => (
          <div>
            <h4>Name: {friend.name}</h4>
          </div>
        ))}
      </div>
    </div>
  );
};

export default UserInfo;

我创建了从 jsonplaceholder 收集数据的假数据，并根据上述方法进行了测试，它运行良好。但是当我尝试加载数据 API 调用时，出现以下错误：

第一个错误表明在将 id 与 api 调用匹配后，它无法从本地存储中读取属性我试图 return 的名称。

2.second 错误表示我无法理解我的情况。我试过 abortCall 来处理这个错误。错误消失了，但我的问题仍然存在。我现在可以做什么？？？？

Answer 1

在渲染中，朋友 return [{0:undefined}]。你没有正确设置好友。

Answer 2

我制作了您的 UserInfo 组件的 Class 版本。它是这样工作的。

import React from "react";
import { getDatabaseCart } from "../../utilities/databaseManager";

class UserInfo extends React.Component {
  state = {
    users: [],
    friends: []
  }
  
  componentDidMount = () => {
    this.getDataFromServer();
    this.getDateFromLocalStorage();
  }

  getDataFromServer = () => {
    fetch("https://jsonplaceholder.typicode.com/users")
    .then((res) => res.json())
    .then((data) => this.setState({users:data}));
  }

  getDateFromLocalStorage = () => {
    const savedFriends = getDatabaseCart();
    const friendsId = Object.keys(savedFriends);
    //console.log(friendsId)
    this.setState({friends:friendsId})
  }

  render() {
    const {users, friends} = this.state;
   // console.log('users',users, friends);
   // console.log('friends', friends);

    return (
      <div className="userInfo-container">
        <div className="userInfo">
          {users.length > 0 && friends.map((friendId) => {
            const friend = users.find(user => user.id === parseInt(friendId));
            return (
            <div>
              <h4>Name: {friend && friend.name}</h4>
            </div>
          )})}
        </div>
      </div>
    );

  }
}


export default UserInfo;

请注意，您对 'fetch' 有一个承诺，因此在第一次渲染时直到获取用户 user = [] 空数组。为避免错误，最好在尝试映射朋友之前检查用户的长度。您可以在此处删除好友检查，因为如果好友数组为空，则没有可映射的内容。

return (
  <div>
    <h4>Name: {friend.name}</h4>
  </div>
)

现在，它应该是一个包含 ul 和 li 的列表。

Answer 3

带挂钩：

import React, { useState } from "react";
//import "./UserInfo.css";
import { useEffect } from "react";
import fakedata from "../../fakedata";
import { getDatabaseCart } from "../../utilities/databaseManager";

const UserInfo = () => {
  // // using fakedata
  // const [users, setUsers] = useState(fakedata);

  // // declaring state while calling api
  const [users, setUsers] = useState([]);

  // declaring state while loading data from local storage
  const [friends, setFriends] = useState([]);

  // to load data from Api call
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  // to load data from local storage
  useEffect(() => {
    const savedFriends = getDatabaseCart();
    const friendsId = Object.keys(savedFriends);
    setFriends(friendsId);
  }, []);

  // console.log(friends);
  // console.log(users);

  return (
    <div className="userInfo-container">
      <div className="userInfo">
      {users.length > 0 && friends.map((friendId) => {
            const friend = users.find(user => user.id === parseInt(friendId));
            return (
            <div>
              <h4>Name: {friend && friend.name}</h4>
            </div>
          )})}
      </div>
    </div>
  );
};


export default UserInfo;

如何一次从 rest API 和 localStorage 获取数据？

How to fetch data from restAPI and from localStorage at a time?

reactjs

use-effect

use-state