如何一次从restAPI和localStorage提取数据？

如何解决如何一次从restAPI和localStorage提取数据？

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

add_action( 'woocommerce_single_product_summary','bbloomer_echo_short_desc_if_empty',21 );

 function bbloomer_echo_short_desc_if_empty() {
   global $post;
   if ( empty ( $post->post_excerpt  ) ) {
      $post_excerpt = '<p class="default-short-desc">';
      $post_excerpt .= 'This is the default,global,short description.<br>It will 
         show if <b>no short description has been entered!</b>';
      $post_excerpt .= '</p>';
     echo $post_excerpt;
   }
 }

我已经创建了从jsonplaceholder收集数据的fakedata，并根据上述方法进行了测试，并且效果很好。但是当我尝试加载数据API调用时，出现以下错误：

1. 第一个错误表明它无法读取我将id与api调用匹配后试图从本地存储返回的name属性。

2.second错误表示我无法理解。我已经尝试过abortCall来处理此错误。错误消失了，但我的问题仍然存在。我现在该怎么办？？？

解决方法

在渲染中，Friends返回[{0：undefined}]。您没有正确设置朋友。

,

我为您的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 = []空数组。为避免出现错误，最好在尝试映射朋友之前检查用户的长度。 您可以在此处删除好友检查，因为如果friends数组为空，则没有要映射的内容。

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

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

,

带钩子：

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;