很难理解是什么原因导致了这个问题,需要做什么修复。我有一个名为deckInfo
的数组,它带有state。在我尝试更新它的状态后,它不再被认为是数组。我可以通过调用console.log(Array.isArray(deckInfo))
来判断这种情况,在状态更新后,我得到了false。
这产生了两个问题:1)我在deckInfo
上使用了一个map函数,所以在状态更新后,它不再是一个数组,我无法在不出现错误的情况下调用map函数。2)我无法测试handleDeckInfoChange
函数以确保状态设置正确。deckInfo
中的数据格式如下[{"topic": "some string", "description": "some string", "id": 0}, "topic": "some string", "description": "some string", "id": 1}, ...]
。此处'我目前拥有的是:editDeckRoute.jsx
import React from "react"
import axios from "axios"
import EditFlashcard from "../editFlashcard/editFlashcard"
const EditDeckRoute = ({deckID}) => {
const url = "http://localhost:8080/api/deck/" + deckID
const [deckInfo, setDeckInfo] = React.useState([])
React.useEffect(() => {
axios.get(url).then((response) => {
setDeckInfo(response.data)
})
}, [])
function newCard() {
const tmpDeck = new Map()
tmpDeck.set("topic", "")
tmpDeck.set("description", "")
tmpDeck.set("id", deckInfo.length++)
// create brand new array. loop through deckInfo and add elements to new array
let tmpArr = []
deckInfo.map((card) => {
tmpArr.push(card)
})
tmpArr.push(tmpDeck)
setDeckInfo(tmpArr)
}
function handleDeckInfoChange(index, e) {
console.log(`${[e.target.name]}: ${e.target.value} ${index} `)
setDeckInfo(prevState => ({
...prevState.map(card => ({
...card = new Map(Object.entries(card)),
...card.get("id") === index
? card.set([e.target.name], e.target.value)
: card
}))
}))
}
return (
<>
<div className="wrapper">
<div className="header">
<h1>Edit Flashcards</h1>
<button onClick={newCard} >Add Card</button>
</div>
{console.log("is array: ", Array.isArray(deckInfo))}
{deckInfo.map((flaschard, num) => {
return <EditFlashcard key={num} index={num} flaschard={flaschard} change={handleDeckInfoChange} />
}
)}
</div>
</>
)
}
export default EditDeckRoute;
1条答案
按热度按时间gc0ot86w1#
好像就是这个问题,试试这个