Как заполнить выпадающий список данными JSON в React?

Question

Я пытаюсь заполнить раскрывающийся список данными из формата JSON, но на данный момент раскрывающийся список пуст (результаты не найдены...)

Я конечно ошибаюсь и не могу понять, где я путаю.

Я приложу экран моего API.

Я хочу получить Station и NameStation..

API для станций

Мой код:

import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

function parseStations(stations){
  return stations.map((station) => {
    return { label: station.NameStation, value: station.Station };
  });
}

export default class Weather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [
        { value: true, label: 'Yes' },
        { value: false, label: 'No' }
      ], stations: [

      ],
      value: null
    }
    this.onChange = this.onChange.bind(this);
  }
  onChange(event) {
    this.setState({ value: event.value });
    console.log('Boolean Select value changed to', event.value);
  }

  componentDidMount() {
    this.getStations();
  }

  getStations() {
    fetch('http://localhost:56348/api/stations', {
      data: 'Station',
      data: 'NameStation',
      method: "GET"
    }).then(res => res.json())
      .then(res => this.setState({ stations: parseStations(res.stations) }))
      //.then(res => this.setState({ stations: res.stations }))
      //.catch(e => )
  }

  render() {
    return (
      <div className="MasterSection">
        <div className="wrapper">
          <div className="section">Изберете № на станция</div>
          <Select
            onChange={this.onChange}
            //options={this.state.options}
            options={this.state.stations}
            value={this.state.value}
            clearable={false}
          />
        </div>
        <div class="section">
          <input type="text" class="form-control" placeholder="Брой дни назад" aria-label="Username" aria-describedby="basic-addon1"></input>
        </div>
        <div class="section">
          <button type="button" class="btn btn-outline-dark">Покажи</button>
        </div>
      </div>
    );
  }
}

Answer 1

1. componentDidMount() выполняется только после render() выполнен. так что нет пути getStations() выполняется в тот момент, когда ваш пользовательский интерфейс отображается. это не очень хорошая идея setState внутри componentDidMount() как это вызывает повторный рендеринг. использование componentWillMount() вместо.

2. исправить опечатку, упомянутую Dyo и использовать options={this.state.stations}

Answer 2

Кажется, вы сделали опечатку с именем опоры stations вместо options:

<Select
    onChange={this.onChange}
    options={this.state.stations} // here
    value={this.state.value}
    clearable={false}
/>

Изменить: вам нужно сначала проанализировать ваш JSON, чтобы передать правильный массив объектов, как это: [{ label: nameStation, value: Station }]

Редактировать 2: Вот парсер для ваших данных:

function parseStations(stations){
  return stations.map((station) => {
    return { label: station.NameStation, value: station.Station };
  });
}

Вы можете вызвать это в своем асинхронном запросе перед установкой состояния:

.then(res => this.setState({ stations: parseStations(res.stations) }))