Uncaught TypeError: DroppedItem.map不是ReactJS的函数 &g

Question

我得到错误"Uncaught TypeError: DroppedItem。map不是一个函数。当打开一个案例后试图在我的页面上显示一个浮动窗口时。我认为这与渲染(https://jsramblings.com/are-you-logging-the-state-immediately-after-updating-it-heres-why-that-doesnt-work/)有关，但我不知道如何修复它。请帮助。我使用Axios从后端服务器加载数组。"className">

import {useEffect, useState, useContext} from "react"
import {useLocation} from 'react-router-dom'
import Axios from "axios";
import { AppContext } from "/src/App";
export default function CaseDetail(){
const [ContentList, setContentList] = useState([])
const [Case, setCase] = useState([])
const [ShowDrop, setShowDrop] = useState(false)
const [DroppedItem, setDroppedItem] = useState([])
const { token } = useContext(AppContext);
const { setToken } = useContext(AppContext);
const { userID } = useContext(AppContext);
const DroppedItemFunc = (array) => {
setDroppedItem(array)
}
const DropWindow = () => {
setShowDrop(!ShowDrop)
}
const MilSpecList = ContentList.filter(function(driver){
return driver.RarityName === "Mil-Spec"
})

const openCase = (CasePrice) => {
const Price = parseInt(CasePrice)
if (token >= Price){
setToken(token-Price)
const randomNumero = Math.random()* 100;
if(randomNumero <= 70)
{
const millength = MilSpecList.length
const randomItemM = Math.floor(Math.random() * (millength - 0)+ 0)
console.log(MilSpecList[randomItemM].SkinName)
console.log(MilSpecList[randomItemM].IDItem)
submitItem(MilSpecList[randomItemM].IDItem)
setDroppedItem(MilSpecList[randomItemM])
setShowDrop(!ShowDrop)
}
}else{console.log("No funds")}
}
return(
<div className="flex justify-center align-bottom">
{ShowDrop && <div className=" absolute">
{DroppedItem.map(item => (
<div className=" border-2 border-slate-500 w-[25rem] h-[30rem] p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 ">

<button
className=' border-2 border-green-700 bg-green-400 hover:bg-green-600 text-green-900 hover:text-rose-50 w-[100%] h-10 rounded-cool ' 
onClick={()=>{DropWindow()}}
>
Close
</button>
</div>
))}
</div>
}
<div className="bg-slate-800 rounded-cool text-white divide-y-2 w-3/5 p-3">
{Case.map(item => (
<h1 key={item.CaseName} className="text-4xl font-bold text-slate-200 py-2" >
{item.CaseName} 💼
</h1>
))}
{Case.map(item => (
<div key={item.CaseName} className="flex justify-center p-3 mt-2">

<div className=" w-[50%] p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 " 
>
<div className="flex justify-center">
<img className="" src={`src/images/${item.CaseImage}`}/>
</div>
<h1 className="hover:text-orange-300">
{item.CaseName}
</h1>
<h1 className="hover:text-orange-300 basis-1/2">
{item.CasePrice} Tokens
</h1>
<div className=" flex justify-center">
<button className=" cursor-pointer text-xl text-slate-900 w-40 h-10 hover:text-orange-300 hover:bg-slate-600 hover:border-2 hover:border-white-200 bg-orange-300 rounded-cool px-2 py-0.25 transition-all"
onClick={() => {openCase(item.CasePrice)}}
>
OPEN
</button>
</div>
</div>
</div>
))}
</div>
</div>
)
}

Answer 1

你的错误在这里:setDroppedItem(MilSpecList[randomItemM])-你不能修改你的状态的数据类型从一个数组，到一些其他的值，因为方法'map'不再变得可用。尽量确保你不修改数据结构，我发现prop-types(在reactJS中)，typescript(在reactTS中)和eslint(一般情况下)帮助我很多，以确保我不会意外地改变我的结构类型。还可以尝试控制台记录MilSpecList[randomItemM]的值和类型，以确认类型确实是一个数组，以及您可能运行setDroppedItem

的任何地方。