Javascript 如何在React中用JSON数据填充下拉列表？

我试图用JSON格式的数据填充下拉列表，但目前该下拉列表为空，未找到任何结果

我肯定是弄错了，我不明白我在哪里弄糊涂了

我将附加一个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>
    );
  }
}

---

似乎您在命名道具站而不是选项时输入了一个错误：

在设置状态之前，您可以在异步请求中调用：

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

---

似乎您在命名道具站而不是选项时输入了一个错误：

在设置状态之前，您可以在异步请求中调用：

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

componentDidMount仅在渲染完成后执行。因此，在呈现UI时不可能执行getStations。在componentDidMount内设置State不是一个好主意，因为它会触发重新渲染。改用componentWillMount

更正Dyo提到的打字错误，并使用options={this.state.stations}

componentDidMount仅在渲染完成后执行。因此，在呈现UI时不可能执行getStations。在componentDidMount内设置State不是一个好主意，因为它会触发重新渲染。改用componentWillMount

更正Dyo提到的打字错误，并使用options={this.state.stations}

---

在componentDidMount中获取数据是一种很好的做法，您不能期望在使用componentWillMount进行第一次渲染之前获得数据，因此您还需要设置初始状态，并且还会发生重新渲染。还有@Dyo我明白你的意思了，我只关心设置状态。由于fetch本质上是异步的，因此无法在两种不同的功能中将它们分开。您认为在componentDidMount中设置状态可以吗？是的，当您在异步函数中设置状态时可以，因为同步操作构造函数是一个更好的选择。在componentDidMount中获取数据是一个很好的做法，您不能期望在使用componentWillMount进行第一次渲染之前获得数据，因此您还需要设置初始状态，并且也会发生重新渲染。还有@Dyo我明白你的意思了，我只关心设置状态。由于fetch本质上是异步的，因此无法在两种不同的功能中将它们分开。您认为componentDidMount中的setState可以使用吗？是的，当您在异步函数中设置state时，对于同步操作，构造函数是一个更好的选择。@ZlatkaPijeva将parseStations函数放在组件类之外，或者如果声明为method，则将其声明为method remove函数现在我只有两个错误：第19行：“Station”未定义没有未定义第19行：“NameStation”未定义没有-undef@ZlatkaPijeva你在初始状态中添加了[{label:nameStation，value:Station}]，我写这篇文章只是为了说明需要传递给Select选项的对象格式，只需删除它并像以前一样将初始状态设置为空数组：stations:[]我删除[{label:nameStation，value:Station}]，并保留空数组，但下拉列表仍然为空，未找到结果：@ZlatkaPijeva可能将res.stations更改为res.stations。Stations@ZlatkaPijeva将parseStations函数置于组件类之外，或者如果声明为methodNow，则将其声明为MethodRemove函数。我只有两个错误：第19行：“Station”未定义无未定义第19行：“NameStation”未定义否-undef@ZlatkaPijeva您在初始状态中添加了[{label:nameStation，value:Station}]，我写这篇文章只是为了说明需要传递给Select选项的对象格式，只需删除它，并像之前一样将初始状态设置为空数组：stations:[]i remove[{label:nameStation，value:Station}]并保留空数组，但下拉列表仍然为空未找到结果：@ZlatkaPijeva可能会将res.stations更改为res.stations.stations

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