在 Reactnative 中首次渲染时，如何使用 useState 放置数组 object 的值？

Question

I have an object array called targetFarm, and when I run the map function, the value comes out like this.

targetFarm.children.map((item) => item.children.map((v) => console.log("v:", v)));

v = {
    name: "coffee"
}

v = {
    name: "tea"
}

v= {
    name: "icecream"
}

What I want to do is put the value of this v.name in an array form using useState in the box constant. as below

box = [
    "coffee",
    "tea",
    "icecream",
]

But when I used my code This error pops up.

"Cannot read property 'push' of undefined"

const [box, setBox] = useState(

    targetFarm.children.map((item) => {
        item.children.map((v) => {
            box.push(v.name)
        })
    })
)

then How can i fix my code?

Answer 1

What I want to do is put the value of this v.name in an array form using useState in the box constant

You can use map and flatMap like below

targetFarm.children.flatMap((item) => item.children.map((v) => v.name);

"Cannot read property 'push' of undefined"

From your code, box has not been initialized yet, so undefined does not have push method. That's why it's throwing that error.

If you want to assign the default state value for box , you can check the below example.

const [box, setBox] = useState(
    targetFarm.children.flatMap((item) => 
        item.children.map((v) => v.name)
    )
)