React Context api: el consumidor no se vuelve a renderizar después de cambiar el contexto

Agradecemos tu apoyo para extender nuestros artículos con relación a las ciencias de la computación.

Solución:

Cuando actualiza el estado, no activa una nueva representación del proveedor y, por lo tanto, los datos del consumidor no cambian. Debe actualizar el estado usando setState y asignar valor de contexto al proveedor como

class App extends React.Component 
  constructor(props : Props) 
    super(props);
    this.state = 
         jsonTransactions: null,
         setJsonTran: this.setJsonTran
    ;
  

  setJsonTran : (data: WithdrawTransactionsElement) => 
        this.setState(
             jsonTransactions: data
        );
  

  render() 
    return (
        
          

            

              
              
            
          
        
    );
  


export default App;

Tu setJsonTran simplemente muta el valor predeterminado del contexto que no causará el value dado a la Provider cambiar.

En su lugar, podría mantener el jsonTransactions en el estado superior y transmitir una función que cambiará este estado y, a su vez, actualizará el value.

Ejemplo

const AppContext = React.createContext();

class App extends React.Component 
  state = 
    jsonTransactions: null
  ;

  setJsonTran = data => 
    this.setState( jsonTransactions: data );
  ;

  render() 
    const context = this.state;
    context.setJsonTran = this.setJsonTran;

    return (
      
        

          

            
            
          
        
      
    );
  

const AppContext = React.createContext();

class App extends React.Component 
  state = 
    jsonTransactions: null
  ;

  setJsonTran = data => 
    this.setState( jsonTransactions: data );
  ;

  render() 
    const context = this.state;
    context.setJsonTran = this.setJsonTran;

    return (
      
        

          

            
            
          
        
      
    );
  


class SubmitTransactionFile extends React.Component 
  fileLoadedEvent(file, context) 
    let files = file.target.files;
    let reader = new FileReader();
    if (files && files[0]) 
      reader.readAsText(files[0]);
      reader.onload = json => 
        if (json && json.target) 
          // slice just to not output too much in this example
          context.setJsonTran(json.target.result.slice(0, 10));
        
      ;
    
  

  render() 
    return (
      
        context => (
          

            Select Transaction File
            

             this.fileLoadedEvent(file, context)
            />
            
context.jsonTransactions
          
        )
      
    );
  


class WithdrawTransactionsTable extends React.Component 
  render() 
    return (
      
        context => (
          

            context.jsonTransactions
          
        )
      
    );
  


ReactDOM.render(, document.getElementById("root"));

Recuerda dar difusión a este ensayo si lograste el éxito.

Utiliza Nuestro Buscador