在选择反应中获取数据

Question

有一个选择形式，在第一个选择了一系列《星球大战》中的电影。并且其他两个应显示所选电影中的太空飞船。我不太了解如何正确编写条件，如果您对条件进行写操作，那么就会发现很多代码，我相信还有一种更合理的方法。

组件代码：

class StarshipsCompare extends Component {
  swapiService = new SwapiService();
  state = {
    filmList: [],
  };

  componentDidMount() {
    this.swapiService.getAllFilms().then((filmList) => {
      this.setState({ filmList });
    });
  }
  renderItems(arr) {
    return arr.map(({ id, title }) => {
      return (
        <option value={title} key={id}>
          {title}
        </option>
      );
    });
  }

  render() {
    const { filmList } = this.state;
    const items = this.renderItems(filmList);
    return (
      <div>
        <form>
          <p>Выберите фильм корабли из которого хотите сравнить:</p>
          <select className="custom-select">{items}</select>
          <div className="row p-5">
            <div className="col">
              <p>Выберите корабль для сравнения:</p>
              <select className="custom-select"></select>
            </div>
            <div className="col">
              <p>Выберите корабль для сравнения:</p>
              <select className="custom-select"></select>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

并获取数据：

export default class SwapiService {
  _apiBase = "https://swapi.dev/api";
  async getResource(url) {
    const res = await fetch(`${this._apiBase}${url}`);

    if (!res.ok) {
      throw new Error(`Could not fetch ${url}, status: ${res.status}`);
    }

    return await res.json();
  }

  getAllFilms = async () => {
    const res = await this.getResource("/films/");
    return res.results.map(this._transformFilms);
  };
}

Answer 1

这是我将如何做的一个简单示例。 &&的使用是if中JSX语句的优雅替代。

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="app_root"></div>    
<script type="text/babel">
// Constants representing API Data.
const MAIN_SELECT_OPTIONS = ["A", "B", "C"];
const SUB_SELECT_OPTIONS = {
  A: ["A1", "A2", "A3"],
  B: ["B1", "B2", "B3"],
  C: ["C1", "C2", "C3"]
};

const SelectState = () => {
  const [mainSelect, setMainSelect] = React.useState("");
  const [subSelect, setSubSelect] = React.useState("");

  const [subSelectOptions, setSubSelectOptions] = React.useState([]);

  const onMainSelectChange = (event) => {
    setMainSelect(event.target.value);
    setSubSelect("");

    if (event.target.value) {
      setSubSelectOptions(SUB_SELECT_OPTIONS[event.target.value]);
    } else {
      setSubSelectOptions([]);
    }
  };

  const onSubSelectChange = (event) => {
    setSubSelect(event.target.value);
  };

  return (
    <div>
      <h1> Main Select </h1>
      <select onChange={onMainSelectChange} value={mainSelect}>
        <option value="">Select Main</option>
        {MAIN_SELECT_OPTIONS.map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>

      <h1> Sub Select </h1>
      <select onChange={onSubSelectChange} value={subSelect}>
        {!subSelect && <option>Select a State</option>}
        {subSelectOptions.map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
    </div>
  );
};

ReactDOM.render(<SelectState />, document.getElementById("app_root"));

</script>