Tengo este componente en mi aplicación reaccionar js:
import React, { useState } from "react"; import Select, { components, DropdownIndicatorProps } from "react-select"; import { ColourOption, colourOptions } from "./docs/data"; const Component = () => { const [state, setState] = useState(); console.log(state); const DropdownIndicator = (props) => { const { menuIsOpen } = props.selectProps; setState(menuIsOpen); return ( <components.DropdownIndicator {...props}>12</components.DropdownIndicator> ); }; return ( <Select closeMenuOnSelect={false} components={{ DropdownIndicator }} defaultValue={[colourOptions[4], colourOptions[5]]} isMulti options={colourOptions} /> ); }; export default Component;En el componente DropDownIndicator configuro el estado:
const { menuIsOpen } = props.selectProps; setState(menuIsOpen); Al configurar el estado en ese lugar, recibo la siguiente advertencia: Warning: Cannot update a component (Component) while rendering a different component (DropdownIndicator). To locate the bad setState() call inside DropdownIndicator .
Pregunta: ¿Cómo puedo corregir esta advertencia y hacer que desaparezca?
demostración: https://codesandbox.io/s/codesandboxer-example-forked-97sx0?file=/example.tsx:0-724
Debes llamar a setState dentro useEffect
const DropdownIndicator = (props) => { const { menuIsOpen } = props.selectProps; useEffect(() => { setState(menuIsOpen); }); return ( <components.DropdownIndicator {...props}>12</components.DropdownIndicator> ); };¿Qué hace useEffect ? Al usar este Hook, le dices a React que tu componente necesita hacer algo después del renderizado. Leer más sobre useEffect
En caso de que su setState dependa de menuIsOpen . Pase a useEffect como dependencia.
const DropdownIndicator = (props) => { const { menuIsOpen } = props.selectProps; useEffect(() => { setState(menuIsOpen); },[menuIsOpen]); return ( <components.DropdownIndicator {...props}>12</components.DropdownIndicator> ); };Solución completa en CodeSandbox
Simplemente marque useState con el valor predeterminado como false
const [state, setState] = useState(false); parece cuando estás haciendo setState(menuIsOpen); por primera vez, su valor no está undefined y DropdownIndicator aún no ha terminado con la primera representación,
[Hipótesis] Debe haber algún código con React.Component según el seguimiento de la pila, basado en una verificación indefinida/nula. Pero cuando se le da initialState, el error no ocurre.