Error: demasiados renderizados. React limita el número de renderizaciones para evitar un bucle infinito. Mi objetivo es mantener actualizados los datos de la ciudad a medida que se actualizan los países. Recibo este error, ¿cómo solucionarlo en este código?
const [selectedCity, setSelectedCity] = useState({}) const [selectedCountry, setSelectedCountry] = useState({}) const [cityData,setCityData]= useState(TurkeyCityData) function onChangeCity() { return (val) => setSelectedCity(val) } function onChangeCountry() { setCityData(`${selectedCountry.item}${'CityData'}`) return (val)=>setSelectedCountry(val); } //`${selectedCountry.item}${'CityData'}` return ( <View style={styles.container}> <View style={styles.header}> <SelectBox label='' options={countryData} value={selectedCountry} onChange={onChangeCountry()} hideInputFilter={false} width={width/2.5} containerStyle={styles.selectbox} arrowIconColor='#5359d1' searchIconColor='#5359d1' inputPlaceholder='Ülke Seç' />En el ejemplo vinculado que compartió, el código del controlador es:
function onChange() { return (val) => setSelectedTeam(val) } Esto devuelve una función de establecimiento de estado que se usa como controlador de cambios con onChange={onChange()} .
En su código, devuelve un controlador como lo hacen ellos, pero también establece el estado de inmediato:
function onChangeCountry() { setCityData(`${selectedCountry.item}${'CityData'}`) // <-- triggers rerender return (val)=>setSelectedCountry(val); }Tiene que haber alguna condición o mecanismo de activación para cualquier conjunto de estados o obtendrá un bucle de reproducción infinito. Puede usar un efecto o colocar el setter dentro de la devolución de llamada del controlador, lo que tenga más sentido para la lógica de su aplicación:
function onChangeCountry() { return val => { setSelectedCountry(val); setCityData(`${selectedCountry.item}${'CityData'}`); }; }Aparte, no estoy seguro de si la capa adicional de abstracción tiene mucho sentido aquí; Solo usaría una función que es menos confusa:
function onChangeCountry(val) { setSelectedCountry(val); setCityData(`${selectedCountry.item}${'CityData'}`); }y usarlo con:
onChange={onChangeCountry} O cambie el nombre de la función makeOnChangeCountryHandler() para que quede claro que la función no es el controlador en sí; más bien, devuelve/crea/hace el controlador al invocarlo.