小编Dee*_*epi的帖子

我有一个问题，我必须渲染 4 个下拉菜单，每个下拉菜单都有类似的选项（我在这里只渲染了 1 个）。如果我在任何一个下拉列表中选择一个选项，则该选项在其他三个中不可用。

我应该如何更新该州的 selected_planets ？下面的代码从 1 个选择下拉列表更新 selected_planets。但是仍然可以在任何地方使用相同的选项，而且我无法在 selected_planets 数组中获得 4 个不同的选项？我应该如何进行？

此外，来自 API fetch 的响应是一个对象数组，我在行星数组中映射和更新。出于演示目的，让我们考虑一下行星：[海王星、土星、火星、地球、金星、木星]

import React, { Component } from 'react';

export default class Dashboard extends Component {
  state = {
    planets: [],
    selected_planets: []
  };

  componentDidMount() {
    fetch('url')
    .then(response => {
      return response.json();
    })
    .then(data => {
      this.setState({ planets: data });
    });
  }

  handleSelect = event => {
    this.setState({ selected_planets: [event.target.value] });
  };

  render() {
    let select_Planets = this.state.planets.map(planet => {
      return planet.name;
    }); …