¿Cómo llamo a setState desde otro componente en ReactJs?

Poseemos la mejor respuesta que encontramos on line. Queremos que te sirva de ayuda y si puedes compartir alguna mejora siéntete libre de hacerlo..

Solución:

Si trabaja con componentes funcionales, puede usar ganchos como useState. No olvide “guardar” (memorizar) la referencia de su controlador con useCallbackayuda a React a evitar renderizaciones inútiles.

Solución de componente funcional

// myContainer.js
import React,  useState  from 'react'
import MyChild from 'some/path/myChild'

function MyContainer() 
  const [name, setName] = useState('foo')

  return (
    
  )


export default MyContainer

// myChild.js
import React,  useCallback  from 'react'

function MyChild( name, onNameChange ) 

  const handleInputChange = useCallback(event => 
    onNameChange(event.target.value)
  , [onNameChange])

  return (
    

      
      
The name is: name
    
  )


export default MyChild

En una clase, puede usar el controlador (método) que contiene alguna lógica o llamada (s) de función. Ayuda a mantener su código mantenible.

Solución de componente de clase

// myContainer.js
import React,  Component  from 'react'
import MyChild from 'some/path/myChild'

class MyContainer extends Component 
  state = 
    name: 'foo'
  

  handleNameChange = name => 
    this.setState( name )
  

  render() 
    return (
      
    )
  



export default MyContainer

// myChild.js
import React,  Component  from 'react'

class MyChild extends Component 

  handleInputChange = event => 
    this.props.onNameChange(event.target.value)
  

  render() 
    return (
      

        
        
The name is: this.props.name
      
    )
  



export default MyChild

no puedes llamar directamente setState en un componente principal desde un componente secundario porque la actualización del estado de un componente está restringida al componente actual.

Para manejar esto, simplemente pase una función del padre al hijo que contiene setState. Entonces, cuando desee actualizar el estado de los padres, simplemente llame a la función aprobada.

Un ejemplo mínimo:

// Parent.jsx

import React,  Component  from 'react';
import Child from './Child';

class Parent extends Component 
  constructor(props) 
    super(props);
    this.setChanged = this.setChanged.bind(this);
    this.state = 
      changed: false
    
  

  // Function to set the parent's state
  setChanged() 
    this.setState( changed: true );
  

  render() 
    return 
  


// Child.js

import React from 'react';

function Child(props) 
  return (
    // When clicked, parent's setChanged function is called
    
 props.setChanged() />
  )

---

---

Utiliza Nuestro Buscador