将 API 数据应用到动态选择下拉列表中

问题描述

目标：
使用 API 检索数据，然后将其应用于动态选择下拉列表。
id 应该是一个值，名称应该是一个标签。

问题：
如何检索数据并将其应用到选择下拉列表中？

信息：
*我是 React JS 的新手

堆叠闪电战：
https://stackblitz.com/edit/react-dropdown-sample-thx8xv?file=index.js

谢谢！

---

import React,{ Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  fetchUsers() {
    fetch(`https://jsonplaceholder.typicode.com/users`)
      .then(response => response.json())
      .then(data =>
        this.setState({
          users: data
        })
      )
      .catch(error => this.setState({ error,isLoading: false }));
  }

  onSelect(option) {
    console.log("You selected ",option.label);
    console.log("You selected ",option.value);
    //this.setState({selected: option})
  }

  render() {
    const options = [
      { value: "one",label: "One" },{ value: "two",label: "Two",className: "myOptionClassName" },{ value: "three",label: "Default" }
    ];

    const defaultOption = options[3];

    return (
      <div>
        <Dropdown
          options={options}
          onChange={o => this.onSelect(o)}
          value={defaultOption}
          placeholder="Select an option"
        />
      </div>
    );
  }
}

render(<App />,document.getElementById("root"));

解决方法

Forked project here :

• 将 API 提取移至 componentDidMount 生命周期方法
• 将 state 初始化为一个空数组 -> 因为这将被更新为一个数组并且初始渲染不会导致进一步使用 map 的问题
• 映射列表（获取数据并更新状态后的结果）- for more info on list building 然后绑定到下拉列表