Блог

Привет, ребята, я новичок в React. Я пытаюсь создать каскадный выпадающий список с использованием реактивных крючков, и то, как я это сделал, работает хорошо, но я чувствую, что что-то не так в том, как я это сделал. Пожалуйста, проверьте этот код и скажите мне, есть ли способ, которым я могу улучшить свой код.Заранее спасибо

 import React, { useState } from 'react';
import './App.css';


function App() {

    const[data, setName] = useState({
      countrie:"",
      state:""
    });


    let state;
    const countrie =['Germany','India','France']

    const gstate = ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn']
    const istate = ['Delhi', 'Kolkata', 'Mumbai', 'Bangalore']
    const fstate =['Auvergne','Bretagne','Corse','Centre']

    if(data.countrie==="Germany"){

        state = gstate.map((gstate,key)=> <option key={key} value={gstate}>{gstate}</option>)

     }else if(data.countrie==="India"){

        state = istate.map((istate,key)=> <option key={key} value={istate}>{istate}</option>)

     }else{

       state = fstate.map((fstate,key)=> <option key={key} value={fstate}>{fstate}</option>)
     }

    const countries = countrie.map((countrie,key)=> <option key={key} value={countrie}>{countrie}</option>)


  function handleCountry(e){
    
    setName({...data,countrie:e.target.value});

  }

  function handleStateChange(e){
    
    setName({...data,state:e.target.value});
  }

return (
    <form onSubmit={handleSubmit}>
             <div>
                 <select value={data.countrie} onChange={handleCountry}>
                   {countries}
                 </select>
             </div>

            <div>
          <select value={data.state} onChange={handleStateChange}>
                  {state}
          </select>
            </div>
      <input type="submit" />
    </form>
  );
}

export default App;

  

Лучшее предложение, которое у меня есть, — изменить структуру данных, которая объединяет страну и штаты. Это значительно упрощает сопоставление по каждой стране и получение состояний без необходимости сопоставления переменных. Это также делает его более масштабируемым.

Вот пример использования данных о стране в качестве коллекции:

Codesandbox

 import React, { useState } from "react";

const countriesData = [
  {
    name: "Germany",
    states: ["Duesseldorf", "Leinfelden-Echterdingen", "Eschborn"]
  },
  {
    name: "India",
    states: ["Delhi", "Kolkata", "Mumbai", "Bangalore"]
  },
  {
    name: "France",
    states: ["Auvergne", "Bretagne", "Corse", "Centre"]
  }
];

function Form() {
  const [{ country, state }, setData] = useState({
    country: "Germany",
    state: ""
  });

  const countries = countriesData.map((country) => (
    <option key={country.name} value={country.name}>
      {country.name}
    </option>
  ));

  const states = countriesData.find(item => item.name === country)?.states.map((state) => (
    <option key={state} value={state}>
      {state}
    </option>
  ));

  function handleCountryChange(event) {
    setData(data => ({ state: '', country: event.target.value }));
  }

  function handleStateChange(event) {
    setData(data => ({ ...data, state: event.target.value }));
  }

  return (
    <form onSubmit={() => console.log("Submitted")}>
      <div>
        <select value={country} onChange={handleCountryChange}>
          {countries}
        </select>
      </div>

      <div>
        <select value={state} onChange={handleStateChange}>
          {states}
        </select>
      </div>
      <input type="submit" />
    </form>
  );
}

export default Form;