Как получить данные из объекта массива javascript / JSON и использовать их в React JS

Сначала вам нужно разобрать значения транспортного средства в отдельные массивы элементов опций JSX. Я предпочитаю делать это с помощью функции приведения ...

const vehicles = this.state.veh_data.reduce((acc, veh) => {
      let make = Object.keys(veh)[0],
          vehModels = veh[make];

      return {
            makes: [
                  ...acc.makes,
                  <option value={make}>{make}</option>
            ],
            models:[
                  ...acc.models,
                  ...vehModels.map(model => {
                       return <option value={model}>{model}</option>
                  })
            ]  
       };
},{makes:[], models:[]});

Поскольку каждый элемент в вашем массиве veh_data является объектом, вам необходимо получить доступ к его первому (и единственному) свойству с помощью Object.keys (), чтобы получить все ключи объекта, а затем просто захватить первый (и единственный) ключ.

Доступ к модели можно получить, получив значение этого ключа в каждом объекте, над которым вы перебираете

...

<FormGroup>
      <Input type="select" name="select1" id="select1">
      <option selected disabled>Make</option>
      {vehicles.makes}
      </Input>
</FormGroup>

...

<FormGroup>
  <Input type="select" name="select2" id="select2">
        <option selected disabled>Model</option>
        {vehicles.models}
  </Input>
</FormGroup>

...

Учитывая контекст, я также не вижу необходимости хранить veh_data в состоянии компонента, что является пустой тратой ресурсов, если только эти данные не будут обновлять пользовательский интерфейс динамически, поэтому это будет полное решение .... [ 1113]

https://jsfiddle.net/mfpv1L6s/

(ПРИМЕЧАНИЕ: я понимаю, что это не даст вам полного решения, которое вы «должны» искать, как покажет варианты моделей для каждого транспортного средства, а не только модели, относящиеся к выбранной в настоящий момент марке, но это должно стать хорошей отправной точкой для вас.)

ДОПОЛНИТЕЛЬНЫЙ КРЕДИТ: Я бы также проанализировал этот вариант ценности представления чему-то более привлекательному, как это ...

keyToOption(key){
        return key.split('-')
                .map(word=> word.slice(0,1).toUpperCase + word.slice(1))
                .join(' ');
 }

Затем добавьте его в функцию приведения, как это ...

makes: [
    ...acc.makes,
    <option value={make}>{this.keyToOption(make)}</option>
],

Я включил вышеупомянутое в JSFiddle

(Полный рабочий пример ....)

import React, { Component } from "react";
import { Form, FormGroup, Input } from "reactstrap";
// import { veh_data } from '../shared/vehicle_make_and_models'
const veh_data = [
  { "alfa-romeo": ["145", "90", "Alfa 6", "Alfasud"] },
  { "aston-martin": ["15", "2-Litre", "AM Vantage", "Atom", "Cygnet", "DB2"] },
  { audi: ["100", "200", "A1", "A2", "A3", "A4", "A5", "A6", "A7"] }
];

const vehicles = parseVehicleList(veh_data)

class ImgAndForm extends Component { 
  state = { modelSelected: null };

  handleSearch(event) {
    alert("Search button clicked");
    event.preventDefault();
  }

  handleModelChange(event) {
    console.log(event.target.value);
    this.setState({ modelSelected: event.target.value });
  }

  render() {
    const selectedModels =
      this.state.modelSelected && this.state.modelSelected.length ? (
        vehicles.models[this.state.modelSelected]
      ) : (
        <option value="">(Please Select Make)</option>
      );

    return (
      <div>
        <header className="headerbg d-flex">
          <div className="container my-auto">
            <div className="row">
              <div className="offset-1 col-10 offset-lg-0 col-lg-4">
                <div id="search-form-div" className="container">
                  <div className="row">
                    <div className="col-12 my-4">
                      <h3>Search</h3>
                      <Form onSubmit={this.handleSearch}>
                        <FormGroup>
                          <Input
                            onChange={e => this.handleModelChange(e)}
                            type="select"
                            name="select1"
                            id="select1"
                          >
                            <option value="">Make</option>
                            {vehicles.makes}
                          </Input>
                        </FormGroup>
                        <FormGroup>
                          <Input type="select" name="select2" id="select2">
                            {selectedModels}
                          </Input>
                        </FormGroup>
                        <FormGroup>
                          <Input type="select" name="select3" id="select3">
                            <option value="">Min Price</option>
                            <option value="500">500</option>
                          </Input>
                        </FormGroup>
                        <FormGroup>
                          <Input type="select" name="select4" id="select4">
                            <option value="">Max Price</option>
                            <option value="2000">2000</option>
                          </Input>
                        </FormGroup>
                        <FormGroup>
                          <Input
                            type="submit"
                            name="search"
                            id="search"
                            className="btn btn-primary"
                            value="Search"
                          />
                        </FormGroup>
                      </Form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </header>
      </div>
    );
  }
}

export default ImgAndForm;

function parseVehicleList(data) {
  return data.reduce(
    (acc, veh, i) => {
      let make = Object.keys(veh)[0],
        vehModels = veh[make];

      return {
        makes: [
          ...acc.makes,
          <option key={make + i} value={make}>
            {keyToOption(make)}
          </option>
        ],
        models: {
          ...acc.models,
          [make]: vehModels.map((model, i) => {
            return (
              <option key={make + model + i} value={model}>
                {keyToOption(model)}
              </option>
            );
          })
        }
      };
    },
    { makes: [], models: {} }
  );
}

function keyToOption(key) {
  return key
    .split("-")
    .map(word => word.slice(0, 1).toUpperCase() + word.slice(1))
    .join(" ");
}