4

Cuando el primer autocomplete se asigna un valor, hace una llamada a una API para popular el segundo Autocomplete.

El problema es que si selecciono un valor del primero, selecciono uno del segundo (ya populado) e intento cambiar el primero de nuevo, el valor elegido en el segundo se queda pegado, aunque si cambien las opciones, el segundo autocomplete no se limpia, entonces tengo seleccionada una opción que no pertenece a la cadena de dependencias de los dropdown. ¿Cómo puedo hacer para vaciar el segundo autocomplete antes que se haya la llamada? Intenté esto

value={subSections[0]}

Pero me arroja este error:

useControlled.js:18 MUI: A component is changing the uncontrolled value state of Autocomplete to be controlled. Elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Autocomplete element for the lifetime of the component. The nature of the state is determined during the first render. It's considered controlled if the value is not undefined.

Este es mi componente

import { Header } from './shared/components'
import {
  Box, 
  Container, 
  Grid,
  Autocomplete,
  TextField,
  FormControl,
  Paper
} from '@mui/material'
import './App.scss';
import { useEffect, useState } from 'react';

const sectionOptions = [
  { id: 'menu', label: 'Menú'},
  { id: 'content', label: 'Contenido'},
  { id: 'questions', label: 'Preguntas frecuentes'}
];

export const App = () => {

  // prepare the states for data
  const [ sections, setSections ]                     = useState(sectionOptions);
  const [ subSections, setSubsections ]               = useState([]);
  const [ rawSubSections, setRawSubsections ]         = useState([]);
  const [ selectedSubsection, setSelectedSubsection ] = useState({});

  // on first dropdown changed
  const sectionChanged = async ( evt, value ) => {
    setSubsections([]);
    setRawSubsections([]);
    if ( value && value.id ) {
      const result = await callApi( value.id );
      if( result ) {
        const data = result.map( ({id, label}) => ({ id, label }) )
        setSubsections( data );
        setRawSubsections( result );
      }
    }
  }

   // On second subsection has been changed
  const subSectionChanged = async ( evt, value ) => {
    if( value && value.id ) {
      const subSection = rawSubSections.find( sub => sub.id === value.id );
      console.log( subSection );
    }
  }

  // general API Call
  const callApi = async ( endpoint ) => {
    if( !endpoint ) return;
    const url = `http://localhost:3000/${endpoint}`;
    try {
      const response = await fetch( url );
      const result   = await response.json();
      return result;
    } catch ( error ) {
      console.log( error );
      return;
    }
  }

  return (
    <>
      <Header />
        <Box sx={{
          flexGrow: 1,
          marginTop: '2rem',
        }}>
          <Container>
            <Grid container spacing={3}>
              <Grid sm={4} xs={12}>
                <FormControl fullWidth size='small' >
                  <Paper elevation={8}>
                  <Autocomplete
                    options={sections}
                    renderInput={(params) => <TextField {...params} label="Secciones" />}
                    onChange={sectionChanged}
                    name="sections"
                  ></Autocomplete>
                  </Paper>
                </FormControl>
              </Grid>
              <Grid sm={4} xs={12}>
                <FormControl fullWidth size='small' >
                  <Paper elevation={8}>
                  <Autocomplete
                    value={subSections[0]}
                    options={subSections}
                    renderInput={(params) => <TextField {...params} label="Subsecciones" />}
                    name="subSections"
                    onChange={subSectionChanged}
                  ></Autocomplete>
                  </Paper>
                </FormControl>
              </Grid>
            </Grid>
          </Container>
        </Box>
    </>
  )
}
0

2 respuestas 2

2
+25

Creo que seteando la variable selectedSubSections en la funcion sectionChanged valdría. Si no tienes result, habría que ponerla a nulo para no tener un valor en el combo

  sectionChanged = async ( evt, value ) => {
    setSubsections([]);
    setRawSubsections([]);
    if ( value && value.id ) {
      const result = await callApi( value.id );
      if( result ) {
        const data = result.map( ({id, label}) => ({ id, label }) )
        setSubsections( data );
        if(data.length > 0) setSelectedSubsection(data[0]);
        else setSelectedSubsection(null);
        setRawSubsections( result );
      }
      else setSelectedSubsection(null);
    }
  }
2

Prueba de darle un key sinSentido, y actualiza el valor de este key cuando quieras. Para forzar el re-render del componente que te está mareando.

Es decir:

// Declara como siempre al inicio esta constante
const [algoSinSentido, setAlgoSinSentido] = useState(0)

// Agrega esta constante como una key al segundo Autocomplete.
<Autocomplete
    key={algoSinSentido} 
    // demás options y cosa como ya tienes... 
/>

// Agrega en `sectionChanged()` lo siguiente:
setAlgoSinSentido(prev => prev + 1)

Es la triquiñuela que uso yo para forzar el re-render de un componente cuando React no se entera de que debe de actualizarlo.

De esta manera, siempre que haya un evento onChange en tu primer Autocomplete, el segundo se re-pintará como si acabara de nacer. Es lo que quieres, ¿no?

A ver si te sirve, un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.