css 如何在reactJS中Map数据?

zphenhs4  于 2023-04-13  发布在  React
关注(0)|答案(2)|浏览(109)

当我写items.map它给我 *items.map不是一个函数 *.我这样做是为了wishlist,从localStorage获取数据,但我不能map它.
例如,如何Map写入x.id数据

items?.map((x)=>{console.log(x.id)})

不起作用

import React, { useEffect, useState } from 'react';

const Wishlist = () => {
  useEffect(() => {
    const items = localStorage.getItem('liked');
    items?.map((x) => {
      console.log(x.id);
    });

    console.log('items', items);
  });

  return <div className="test">hello world</div>;
};

export default Wishlist;

console.log('items', items);正在工作。我可以看到[{ my all data},{like this},{there everything good}]

ccrfmcuu

ccrfmcuu1#

从本地存储返回的数据大部分是字符串(或者不管它是什么,它不是一个数组),所以逻辑上你不能使用数组方法(不仅仅是map)
所以要解决这个问题,你需要解析数据,这样你就可以迭代它。

演示如何解析的代码

const parsedData = JSON.parse(localStorage.getItem("liked"))
vsaztqbk

vsaztqbk2#

您必须解析从本地存储获取的数据
const items = JSON.parse(localStorage.getItem('liked'));
然后,在map方法内的箭头函数中,缺少return

items?.map((x) => {
      console.log(x.id);
      return (x.id)
    })

相关问题