-2

Olá. Estou tentando criar um form com quatro selects (Animal, Porte, Estado e Cidade) os selects de estado e cidade que estão sendo um problema. Um faz uma request para apresentar os estados brasileiros (está funcionando normalmente) e o outro select exibirá as cidades do estado selecionado, porém não consigo dar continuidade nessa parte, não consegui passar o id dinamicamente na URL dos municípios. Ao invés de passar somente um id selecionado está indo o array inteiro.

Segue o código abaixo até onde eu consegui:

const FormFinderPets = () => {

  const [species, setSpecies] = useState('');
  const [port, setPort] = useState('');
  const [UFs, setUFs] = useState('');
  const [cities, setCities] = useState('');
  const [listUFs, setListUFs] = useState([]);
  const [listCities, setListCities] = useState([]);

  useEffect(() => {

    const populatedStates = axios.get('https://servicodados.ibge.gov.br/api/v1/localidades/estados');
    populatedStates.then((res) => {
      setListUFs(res.data);

     const stateId = res.data.map(dataid => dataid.id);
      console.log(stateId);

      const populatedCities = axios.get(`https://servicodados.ibge.gov.br/api/v1/localidades/estados/${stateId}/municipios`);
      populatedCities.then((res) => {
        setListCities(res.data);
        console.log(res.data);
      })
    })
  }, []);

  const optionsSpecies = [
    { value: '', name: 'Selecione uma espécie' },
    { value: 1, name: 'Cachorro'},
    { value: 2, name: 'Gato' },
    { value: 3, name: 'Outro' }
  ];

  const optionsPort = [
    { value: '', name: 'Selecione o porte do animal' },
    { value: 1, name: 'Pequeno'},
    { value: 2, name: 'Médio' },
    { value: 2, name: 'Grande' },
  ];

  return (
    <form>
      <div>
        <fieldset>
          <Select
            label="Espécie"
            name="species"
            options={optionsSpecies}
            value={species}
            onChange={(event) => setSpecies(event.target.value)}
            />
        </fieldset>
        <fieldset>
          <Select
            label="Porte do animal"
            name="port"
            options={optionsPort}
            value={port}
            onChange={event => setPort(event.target.value)}
          />
        </fieldset>
        <fieldset>
          <label htmlFor="states">Estado</label>
          <select value={UFs} onChange={event => {setUFs(event.target.value); console.log(event.target.selectedIndex)}} name="states">
            <option value="">Selecione um estado</option>
              {listUFs.map(listUF => (
               <option key={listUF.id}>
                  {listUF.nome}
               </option>
              ))}
          </select>
        </fieldset>
        <fieldset>
        <label htmlFor="states">Cidade</label>
          <select
            value={cities}
            onChange={event => setCities(event.target.value)}
            name="states">
            <option value="">Selecione uma cidade</option>
            {listCities.map(listCity => (
              <option key={listCity.id}>
                {listCity.nome}
              </option>
            ))}
          </select>
        </fieldset>

      </div>

      <button type="submit">Procurar</button>
    </form>

  );
};

3 Respostas 3

1

Percebo que sua dificuldade é como fazer a relação entre os dois <select> e resolvi desenvolver um exemplo mínimo, mostrando a dinâmica quando escolher a unidade federativa carregar a cidade e assim sucessivamente, e um brinde também na hora de iniciar o componente já carrega por padrão a unidade federativa AC, exemplo:

   
function App() {
  const [uf, setUf] = React.useState('AC');
  const [listUf, setListUf] = React.useState([]);
  const [city, setCity] = React.useState('');
  const [listCity, setListCity] = React.useState([]);
  function loadUf() {
      let url = 'https://servicodados.ibge.gov.br/';
      url = url + 'api/v1/localidades/estados';
      fetch(url)
        .then(response => response.json())
        .then(data => {        
          data.sort((a,b) => a.nome.localeCompare(b.nome));
          setListUf([...data]);
         });
  }
  function loadCity(id) {
      let url = 'https://servicodados.ibge.gov.br/api/v1/';
      url = url + `localidades/estados/${id}/municipios`;
      fetch(url)
        .then(response => response.json())
        .then(data => {        
          data.sort((a,b) => a.nome.localeCompare(b.nome));
          setListCity([...data]);
         });
  }
  React.useEffect(() => {
    loadUf();
  },[]);
  React.useEffect(() => {
    if (uf) {
      loadCity(uf);
    }
  }, [uf]);
  return (
    <div>
      <select value={uf} onChange={e => setUf(e.target.value)}>
      {listUf.map((a, b) => ( 
          <option value={a.id}>{a.sigla} - {a.nome}</option>
       ))}
      </select>
      <select value={city} onChange={e => setCity(e.target.value)}>
      {listCity.map((a, b) => ( 
          <option value={a.sigla}>{a.nome}</option>
       ))}
      </select>
    </div>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

nesse código possui 4 estados dois pra guardar a seleções da caixas e o outros dois que guardam as listas dos respectivos valores. Com dois useEffect que vai carregar a caixa de Uf e o outro que ao mudar a unidade federativa carrega as cidades.

Com esse exemplo vai dar um caminho para resolver o seu problema e observe que foi feito o mais simples possível para que entenda o processo.

Um fator importante é a nomenclatura de nomes, dá uma olhada no código e perceba que é utilizado camelCase onde a primeira letra é minúscula e as demais conectadas são maiúsculas, exemplo: objetoSorte, sorteObjeto, etc.

0

Você busca as cidades somente quando o valor do state UFs alterar.

No seu atual código você está buscando assim que carrega todos os UFs.

useEffect(() => { searchCities() },[UFs]);
-2

Eu prefiro fazer tudo em useEffect desta forma:

States:

      const [ufs, setUfs] = useState([]);
      const [cities, setCities] = useState([]);
      const [selectedUf, setSelectedUf] = useState("0");
      const [selectedCity, setSelectedCity] = useState("0");

useEffect

        React.useEffect(() => {
            if (selectedUf === "0") {
              return;
            }
            axios.get(
                `https://servicodados.ibge.gov.br/api/v1/localidades/estados/${selectedUf}/municipios`
              )
              .then((response) => {
                setCities(response.data);
              });
          });

        React.useEffect(() => {
          axios.get("https://servicodados.ibge.gov.br/api/v1/localidades/estados/")
            .then((response) => {
              setUfs(response.data);
            });
        }, [selectedUf]);
3
  • 1
    Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    1/02/2023 às 19:00
  • Além do que já foi comentado, este é o Stack Overflow em português. 1/02/2023 às 23:41
  • oque ja foi comentando não é destinado a performance, desculpa o inglês, é habito 3/02/2023 às 1:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .