TypeError: players.Map不是函数

Question

我有以下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), ST (C)","C":"19","D":"15","E":"14","F":"10","G":"13","H":"14","I":"4","J":"10","K":"13","L":"12","M":"4","N":"13","O":"13","P":"12","Q":"11","R":"9","S":"4","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, key) {
const [value, setValue] = useState(defaultValue);
React.useEffect(() => {
window.localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}

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

然而球员。Map抛出错误。Map不是函数。我也试过JSON.parse(玩家)，但无济于事。

任何帮助都将非常感激。

感谢

Answer 1

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