reactjs 更新状态后不是阵列

h6my8fg2  于 2023-03-12  发布在  React
关注(0)|答案(1)|浏览(142)

很难理解是什么原因导致了这个问题,需要做什么修复。我有一个名为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;
gc0ot86w

gc0ot86w1#

...prevState.map(card => ({
   ...card = new Map(Object.entries(card)),
   ...card.get("id") === index
        ? card.set([e.target.name], e.target.value)
        : card
}))

好像就是这个问题,试试这个

...prevState.map(card => {
   card = new Map(Object.entries(card)),
   return card.get("id") === index
        ? card.set([e.target.name], e.target.value)
        : card
})

相关问题