Javascript 使用下拉列表从react中的JSON映射嵌套数组

我正在我父亲的网站上做一个表格，你可以在那里提交你的汽车信息，然后你会收到一封电子邮件，给你一个报价

无论如何，在表单中有一个选择列表，您可以在其中选择您的汽车品牌，然后还有另一个选择列表，提供所选汽车品牌的车型。我有一个JSON文件，其中包括汽车品牌及其各自的型号，但我似乎无法让它按我希望的方式运行。在这个版本的代码中，第二个下拉列表显示了列表中的所有车型，而不仅仅是选定的汽车品牌车型，因为经过多次尝试，我无法找到正确的代码。任何帮助都将不胜感激

下面是JSON文件carModels.JSON的一个片段

    [
    {
      "brand": "Acura",
      "models": [
        "2.2CL",
        "2.3CL",
        "3.0CL",
        "3.2CL",
        "ILX",
        "Integra",
        "Legend",
        "MDX",
        "NSX",
        "RDX",
        "3.5 RL",
        "RL",
        "RSX",
        "SLX",
        "2.5TL",
        "3.2TL",
        "TL",
        "TSX",
        "Vigor",
        "ZDX"
      ]
    },
    {
      "brand": "Alfa Romeo",
      "models": [
        "164",
        "8C Competizione",
        "GTV-6",
        "Milano",
        "Spider"
      ]
    },
    {
      "brand": "AMC",
      "models": [
        "Alliance",
        "Concord",
        "Eagle",
        "Encore",
        "Spirit"
      ]
    },
    {
      "brand": "Aston Martin",
      "models": [
        "DB7",
        "DB9",
        "DBS",
        "Lagonda",
        "Rapide",
        "V12 Vantage",
        "V8 Vantage",
        "Vanquish",
        "Virage"
      ]
    },
    {
      "brand": "Audi",
      "models": [
        "100",
        "200",
        "4000",
        "5000",
        "80",
        "90",
        "A3",
        "A4",
        "A5",
        "A6",
        "A7",
        "A8",
        "allroad",
        "Cabriolet",
        "Coupe",
        "Q3",
        "Q5",
        "Q7",
        "Quattro",
        "R8",
        "RS 4",
        "RS 5",
        "RS 6",
        "S4",
        "S5",
        "S6",
        "S7",
        "S8",
        "TT",
        "TT RS",
        "TTS",
        "V8 Quattro"
      ]
    },
    {
      "brand": "Avanti",
      "models": [
        "Convertible",
        "Coupe",
        "Sedan"
      ]
    },
    {
      "brand": "Bentley",
      "models": [
        "Arnage",
        "Azure",
        "Brooklands",
        "Continental",
        "Corniche",
        "Eight",
        "Mulsanne",
        "Turbo R"
      ]
    }
  ]

我的代码

import React, { Component } from 'react'
import { Col, Button, Form, FormGroup, Label, Input, FormText, Row } from 'reactstrap'

import carModels from "./carModels"


export class carousel extends Component {

  constructor(props) {
    super(props);
    this.state = {
      carMake: ''
    }
  }

  handleChange = (event) => {
    this.setState({carMake: this.state.carMake = event.target.value });
    console.log(this.state.carMake)
  };


  render() {


    return (
                <div>
                   <Input className="inputBrand" type="select" name="carbrand" id="carBrand" onChange={this.handleChange}>
                     <option>Choose brand</option>
                     {carModels.map((carBrand, index) => {
                       return <option>{carBrand.brand}</option>
                     })}
                  </Input>
                  <Input className="inputBrand" type="select" name="carmodel" id="carModel">
                     <option>Choose model</option>
                     {carModels.map((carBrand, index) => {
                       return carBrand.models.map((brandModels, index) => {
                          return <option>{brandModels}</option>
                       })
                     })}
                  </Input>
                </div>

import React，{Component}来自“React”
从“reactstrap”导入{Col，Button，Form，FormGroup，Label，Input，FormText，Row}
从“/carModels”导入carModels
导出类旋转木马扩展组件{
建造师（道具）{
超级（道具）；
此.state={
卡马克：''
}
}
handleChange=（事件）=>{
this.setState（{carMake:this.state.carMake=event.target.value}）；
console.log（this.state.carMake）
};
render（）{
返回(
选择品牌
{carModels.map（（卡布兰德，索引）=>{
返回{carBrand.brand}
})}
选择模型
{carModels.map（（卡布兰德，索引）=>{
返回carBrand.models.map（（brandModels，index）=>{
返回{brandModels}
})
})}

尝试此操作，并在地图中为第二个下拉列表应用if条件：

    return (
                <div>
                   <Input className="inputBrand" type="select" name="carbrand" id="carBrand" onChange={this.handleChange}>
                     <option>Choose brand</option>
                     {carModels.map((carBrand, index) => {
                       return <option>{carBrand.brand}</option>
                     })}
                  </Input>
                  <Input className="inputBrand" type="select" name="carmodel" id="carModel">
                     <option>Choose model</option>
                     {carModels.map((carBrand, index) => {
                          if(carBrand.brand == this.state.carMake){
                              return carBrand.models.map((brandModels, index) => {
                                  return <option>{brandModels}</option>
                              })
                           }
                      })}
                  </Input>
                </div>
)

返回(
选择品牌
{carModels.map（（卡布兰德，索引）=>{
返回{carBrand.brand}
})}
选择模型
{carModels.map（（卡布兰德，索引）=>{
if（carBrand.brand==this.state.carMake）{
返回carBrand.models.map（（brandModels，index）=>{
返回{brandModels}
})
}
})}
)

您应该这样处理车辆选择

 handleChange = (event) => {
      //we are storing selected index, instead of model name
      this.setState({carMake:event.target.selectedIndex });
     console.log(this.state.carMake)
    };

您应该将所选汽车的汽车模型列表渲染为

renderCarModles=()=>{
  if(this.state.carMake=='')return <option>select car </option>;
   //using selected index to fetch models
   let carModels=carModels[this.state.carMake].models;
    return carModels.map((brandModels, index) => {
                      return <option>{brandModels}</option>
                   })

}

rendercarmodes=（）=>{
如果（this.state.carMake=''）返回选择车；
//使用选定索引获取模型
让carModels=carModels[this.state.carMake].models；
返回carModels.map（（品牌模型，索引）=>{
返回{brandModels}
})
}

---

希望这会有所帮助！

非常感谢！这么小的添加就产生了不同。我似乎不太明白为什么if条件会修复它，你能帮我打开一点吗？因为如果你想要你选择的汽车品牌型号，你需要从json数组中过滤它，然后只从该品牌获得特定的型号，您最初打印的是所有内容。我得到了这部分内容，但我的意思是，如果条件没有改变实际映射函数中的任何内容，那就是让我感到困惑的地方