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

Question

我有一个名为 targetFarm 的 object 数组，当我运行 map function 时，值是这样的。

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

v = {
    name: "coffee"
}

v = {
    name: "tea"
}

v= {
    name: "icecream"
}

我想要做的是使用 box 常量中的 useState 将此 v.name 的值放入数组形式中。 如下

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

但是当我使用我的代码时会弹出此错误。

“无法读取未定义的属性‘推送’”

const [box, setBox] = useState(

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

那么我该如何修复我的代码？

Answer 1

我想要做的是使用 box 常量中的 useState 将此 v.name 的值放在数组形式中

您可以使用map和flatMap如下

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

“无法读取未定义的属性‘推送’”

从您的代码中， box尚未初始化，因此undefined没有push方法。 这就是它抛出该错误的原因。

如果要为box分配默认的 state 值，可以查看以下示例。

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