类型错误：players.map 不是函数

如何解决类型错误：players.map 不是函数

我有以下 JSON 数组：-

    [
{"A":"Player","B":"Position","C":"Age","D":"Acc","E":"Wor","F":"Vis","G":"Tec","H":"Tea","I":"Tck","J":"Str","K":"Sta","L":"Pos","M":"Pen","N":"Pas","O":"Pac","P":"OtB","Q":"Nat","R":"Mar","S":"L Th","T":"Lon","U":"Ldr","V":"Jum","W":"Hea","X":"Fre","Y":"Fla","Z":"Fir","AA":"Fin","AB":"Dri","AC":"Det","AD":"Dec","AE":"Cro","AF":"Cor","AG":"Cnt","AH":"Cmp","AI":"Bra","AJ":"Bal","AK":"Ant","AL":"Agi","AM":"Agg"},{"A":"Cyril Ruffier_YP22I ","B":"AM (R),ST (C)","C":"23","D":"14","E":"13","F":"12","G":"11","H":"14","I":"4","J":"13","K":"13","L":"8","M":"8","N":"11","O":"13","P":"15","Q":"8","R":"2","S":"4","T":"8","U":"12","V":"13","W":"8","X":"7","Y":"11","Z":"16","AA":"9","AB":"10","AC":"17","AD":"12","AE":"9","AF":"5","AG":"8","AH":"13","AI":"4","AJ":"18","AK":"10","AL":"11","AM":"7"},{"A":"John Latouchent_YP26B ","B":"M (L),AM (RLC),"C":"19","D":"15","E":"14","F":"10","G":"13","J":"10","L":"12","M":"4","N":"13","P":"12","Q":"11","R":"9","T":"7","U":"10","V":"9","W":"9","X":"9","Y":"14","Z":"9","AA":"8","AB":"11","AC":"14","AD":"9","AE":"10","AF":"8","AG":"9","AH":"10","AI":"9","AJ":"17","AK":"11","AL":"14","AM":"12"}
]

我正在尝试映射它，以便我可以在此组件中显示它：-

import React from 'react';
import { getStickyState } from './Utils';

const Playersdisplay = () => {
  const [players,setPlayers] = getStickyState([],'players');

  return (
    <>
      {players && (
        <div className='attributesdisplay-container'>
          <div className='container'>
            {console.log(players)};
            {players.map((player) => {
              return <div>{player}</div>;
            })}
          </div>
        </div>
      )}
    </>
  );
};

export default Playersdisplay;

这是我的 Utils 组件中的 getStickyState 函数：-

export function getStickyState(defaultValue,key) {
  const [value,setValue] = useState(defaultValue);

  React.useEffect(() => {
    const stickyValue = window.localStorage.getItem(key);

    if (stickyValue !== null) {
      setValue(JSON.parse(stickyValue));
    }
  },[key]);

  return [value,setValue];
}

这是 setStickyState :-

export function setStickyState(defaultValue,setValue] = useState(defaultValue);

  React.useEffect(() => {
    window.localStorage.setItem(key,JSON.stringify(value));
  },[key,value]);

  return [value,setValue];
}

console.log 正在输出我在这里发布的 JSON 数组。

然而，players.map 抛出错误 .map 不是一个函数。我也试过 JSON.parse(players) 但无济于事。

非常感谢任何帮助。

谢谢

解决方法

players 是一个字符串，而不是一个数组，因为 console.log(players[0]) 显示为 '['。我不知道为什么，从代码中，因为您调用了 JSON.parse。也许您错误地将玩家数组保存到本地存储，例如使用 JSON.stringify 两次。我们没有您用来将数据存储到 localstorage 的代码。