Estoy usando Redux con componentes de clase en React. Tener los dos estados siguientes en la tienda Redux.
{ spinner: false, refresh: false }En los componentes principales, tengo una función de despacho para cambiar estos estados.
class App extends React.Component { reloadHandler = () => { console.log("[App] reloadComponent"); this.props.onShowSpinner(); this.props.onRefresh(); }; render() { return <Child reloadApp={this.reloadHandler} />; } }En Child Component, estoy tratando de volver a cargar el componente principal como se muestra a continuación.
class Child extends React.Component { static getDerivedStateFromProps(props, state) { if (somecondition) { // doing some redux store update props.reloadApp(); } } render() { return <button />; } }Recibo el error como se muestra a continuación.
Advertencia: no se puede actualizar un componente desde dentro del cuerpo de la función de un componente diferente.
¿Cómo eliminar esta advertencia? ¿Qué estoy haciendo mal aquí?
Para mí, estaba enviando a mi tienda redux en un React Hook. Tuve que enviar un useEffect para sincronizar correctamente con el ciclo de procesamiento de React:
export const useOrderbookSubscription = marketId => { const { data, error, loading } = useSubscription(ORDERBOOK_SUBSCRIPTION, { variables: { marketId, }, }) const formattedData = useMemo(() => { // DISPATCHING HERE CAUSED THE WARNING }, [data]) // DISPATCHING HERE CAUSED THE WARNING TOO // Note: Dispatching to the store has to be done in a useEffect so that React // can sync the update with the render cycle otherwise it causes the message: // `Warning: Cannot update a component from inside the function body of a different component.` useEffect(() => { orderbookStore.dispatch(setOrderbookData(formattedData)) }, [formattedData]) return { data: formattedData, error, loading } }Si su código llama a una función en un componente principal cuando se cumple una condición como esta:
const ListOfUsersComponent = ({ handleNoUsersLoaded }) => { const { data, loading, error } = useQuery(QUERY); if (data && data.users.length === 0) { return handleNoUsersLoaded(); } return ( <div> <p>Users are loaded.</p> </div> ); }; Intenta envolver la condición en un useEffect :
const ListOfUsersComponent = ({ handleNoUsersLoaded }) => { const { data, loading, error } = useQuery(QUERY); useEffect(() => { if (data && data.users.length === 0) { return handleNoUsersLoaded(); } }, [data, handleNoUsersLoaded]); return ( <div> <p>Users are loaded.</p> </div> ); };Parece que tiene la última versión de React@16.13.x . Puedes encontrar más detalles al respecto aquí . Se especifica que no debe setState de otro componente de otro componente.
de los documentos:
Se admite llamar a setState durante el procesamiento, pero solo para el mismo componente. Si llama a setState durante un procesamiento en un componente diferente, ahora verá una advertencia:
Warning: Cannot update a component from inside the function body of a different component.
Esta advertencia lo ayudará a encontrar errores de aplicación causados por cambios de estado no intencionales. En el raro caso de que desee cambiar intencionalmente el estado de otro componente como resultado de la representación, puede envolver la llamada setState en useEffect.
Llegando a la pregunta real.
Creo que no hay necesidad de getDerivedStateFromProps en el cuerpo del componente secundario. Si desea activar el evento vinculado. Luego puede llamarlo a través del componente onClick of the Child, ya que puedo ver que es un <button/> .
class Child extends React.Component { constructor(props){ super(props); this.updateState = this.updateState.bind(this); } updateState() { // call this onClick to trigger the update if (somecondition) { // doing some redux store update this.props.reloadApp(); } } render() { return <button onClick={this.updateState} />; } }