尝试基于 json 数据呈现选项但获取地图不是函数

Question

我正在尝试获取基于品牌的模型。但是选择下一个选项时出现错误

错误说 bikeBrand 不是函数

下面是从后端获取的 Json 数据

response from backend { BMW:["F900R", "F900XR"], KTM:["125 Duke", "250 Duke"]}

然后在 React 中使用 useState 钩子存储状态

const [bikeBrands, setBikeBrands] = useState("")

第一个选项值也存储在下面的钩子中

const [selectedBrand, setSelectedBrand] = useState("")

问题出在第二个选择选项中。

<select onChange={(e) => setSelectedBrand(e.target.value)}>
                        <option>Choose brand</option>
                        {Object.keys(bikeBrands).map((bikeBrand, index) => {
                            return <option>{bikeBrand}</option>
                        })}
                    </select>
                    <select onChange={(e) => setModel(e.target.value)}>
                        <option>Choose Model</option>
                        {Object.keys(bikeBrands).map((bikeBrand, index) => {
                            bikeBrand.map((brandModels, index) => {
                                return <option>{brandModels}</option>
                            })
                        })}

                    </select>

Answer 1

如你所愿

{Object.keys(bikeBrands).map((bikeBrand, index) => {
  bikeBrand.map((brandModels, index) => {
   return <option>{brandModels}</option>
  })
})}

请注意，Object.keys(bikeBrands) 为您提供了一系列键，这些单独的键（一次一个）存储在 bikeBrand 中。

这个bikeBrand 是一个变量，它保存字符串BMW 或KTM 而不是值。
所以不要写bikeBrand.map
使用bikeBrands[bikeBrand].map 访问数组值。