Définir l'état des parents du composant démonté

Question

class App extends Component { 

    constructor(){ 
     super(); 
     this.state = { 
      usuarios:[], 
      hayUsuarios: false 
     }; 
    } 

    render() { 

     var usuarios = []; 

     usuarios = this.state.usuarios.map(function(u){ 
      return <Usuario key={u.cId} id={u.cId} nombre={u.dNombre} pedirUsuarios={this.pedirUsuarios()} /> 
     }); 


     return (
     <div className="App"> 
      <header className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h1 className="App-title">Welcome to React</h1> 
      </header> 
      <AdicionarUsuario pedirUsuarios={this.pedirUsuarios()}/> 
      {usuarios} 
     </div> 
     ); 
    } 

    componentDidMount(){ 
     this.pedirUsuarios(); 
    } 

    pedirUsuarios =() =>{ 
     fetch("https://shielded-escarpment-86252.herokuapp.com/usuarios.json") 
     .then(resp => resp.json()) 
     .then(json => this.setState({usuarios: json})) 
     .catch((err) => console.log(err)); 
    } 
} 

AdicionarUsuario

class AdicionarUsuario extends Component{ 

constructor(){ 
    super(); 
    this.state = {nombre:""}; 
} 

onChange = (event) =>{ 
    this.setState({nombre: event.target.value}); 
} 

adicionarUsuario = (event) =>{ 
    event.preventDefault(); 
    console.log(this.state.nombre); 
    this.enviarPost(this.state.nombre); 
} 

enviarPost = (nomb) =>{ 

    let datos = { 
     method: 'POST', 
     body: JSON.stringify({nombre: nomb}), 
     headers:{ 
      'Accept': 'application/json, text/plain, */*', 
      'Content-Type': 'application/json' 
     } 
    } 

    fetch("https://shielded-escarpment-86252.herokuapp.com/adicionarUsuario", datos) 
     .then(resp => resp.json()) 
     .then(algo => this.actualizar(algo)) 
     .catch(err => console.log(err)); 
} 

actualizar = (json) =>{ 
    console.log(json); 
    if(json.respuesta){ 
     this.props.pedirUsuarios(); 
    } 
} 

render(){ 
    return(
     <form onSubmit={this.adicionarUsuario}> 
      <label>Nombre:</label> 
      <input type="text" value={this.state.nombre} onChange={this.onChange} placeholder="Post"/> 
      <input type="submit" value="Adicionar"/> 
     </form> 
    ); 
} 

}

Usuario

class Usuario extends Component{ 

constructor(){ 
    super(); 
} 

render(){ 
    return(
     <div> 
      <h3>{this.props.nombre}</h3> 
      <SubirCancion id={this.props.id} /> 
      <ActualizarUsuario id={this.props.id} /> 
      <EliminarUsuario id={this.props.id} /> 
     </div> 
    ); 
} 

}

Je reçois: « Ne peut mettre à jour une montée ou mountin g composant. Cela signifie généralement que vous avez appelé setState, replaceState ou forceUpdate sur un composant démonté. Ceci est un no-op «

EDIT1. TypeError:. Impossible de lire la propriété 'pedirUsuarios' undefined, supprimer les crochets ne résout pas le problème

EDIT2: Ajouté AdicionarUsuario et Usuario composants

EDIT3: Voici le jsFiddle https://jsfiddle.net/JuanDavid31/69z2wepo/88446/

et je dois réengendrer composante App lorsque l 'enfant com ponent demande i, le problème est que les composants enfants ne seront pas rendus lors de l'ajax. De l'aide?

Answer 1

Vous êtes en train de coincé dans une boucle. Ce n'est pas un très grand message d'erreur, mais ce qui se passe, c'est que vous appelez this.pedirUsuarios() dans votre composant, qui définit ensuite l'état, qui ensuite rediffuse, qui appelle à nouveau this.pedirUsuarios, qui ensuite rediffuse, et ainsi de suite. Je ne peux pas dire si vous essayez de passer la fonction pedirUsuarios comme un accessoire, ou de passer les utilisateurs vers le bas. Si vous voulez passer la fonction, faites comme ci-dessous. Si vous voulez transmettre les données, changez simplement this.pedirUsuarios dans le rendu de this.state.usuarios.

render() { 

    var usuarios = []; 

    usuarios = this.state.usuarios.map(function(u){ 
     return <Usuario key={u.cId} id={u.cId} nombre={u.dNombre} pedirUsuarios={this.pedirUsuarios} /> 
    }); 


    return (
    <div className="App"> 
     <header className="App-header"> 
     <img src={logo} className="App-logo" alt="logo" /> 
     <h1 className="App-title">Welcome to React</h1> 
     </header> 
     <AdicionarUsuario pedirUsuarios={this.pedirUsuarios}/> 
     {usuarios} 
    </div> 
    ); 
} 

componentDidMount(){ 
    this.pedirUsuarios(); 
} 

pedirUsuarios =() =>{ 
    fetch("https://shielded-escarpment-86252.herokuapp.com/usuarios.json") 
    .then(resp => resp.json()) 
    .then(json => this.setState({usuarios: json})) 
    .catch((err) => console.log(err)); 
} 

Answer 2

Vous devez changer

<AdicionarUsuario pedirUsuarios={this.pedirUsuarios()}/> 

à

<AdicionarUsuario pedirUsuarios={this.pedirUsuarios}/> 

Le () supplémentaire dans votre appel est à l'origine de la répétition rend et l'erreur.

EDIT1: Vous devez également faire le même changement ici

<Usuario key={u.cId} id={u.cId} nombre={u.dNombre} pedirUsuarios={this.pedirUsuarios()} />