設定両親状態

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> 
    ); 
} 

}

私が取得しています： は「専用でマウントを更新することができますまたはmountin g成分。これは通常、マウントされていないコンポーネントに対してsetState、replaceState、またはforceUpdateを呼び出したことを意味します。これは何もしません「

EDIT1：TypeError例外：未定義のプロパティ 『pedirUsuarios』を読み取ることができません、 ブラケットが問題を解決していない削除

EDIT2：追加AdicionarUsuarioとUsuarioコンポーネント

EDIT3：ここjsfiddle https://jsfiddle.net/JuanDavid31/69z2wepo/88446/

だと私はとき、子、COMアプリケーションコンポーネントを再レンダリングする必要がありますponentは私に質問します。問題は、ajaxが実行されたときに子コンポーネントがレンダリングされないということです。どんな助け？

Answer 1

あなたが実際にループで立ち往生しています。非常に大きなエラーメッセージではありませんが、コンポーネント内でthis.pedirUsuarios（）を呼び出している状態です。次に、状態を設定します。次にrerendersが呼び出され、this.pedirUsuariosが再度呼び出され、rerendersなどが呼び出されます。私はあなたが小道具として機能pedirUsuariosを渡そうとしているのか、それとも下に落としているのかを知ることはできません。関数を渡す場合は、以下のようにします。データを渡す場合は、this.state.usuariosへのレンダリングでthis.pedirUsuariosを変更してください。

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

あなたはあなたの呼び出しに余分()のレンダリングを繰り返すとエラーの原因となっている

<AdicionarUsuario pedirUsuarios={this.pedirUsuarios}/> 

に

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

を変更する必要があります。

EDIT1：あなたも同じ変更を加える必要があり、ここで

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