設置家長狀態

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：類型錯誤：無法讀取的未定義的屬性‘pedirUsuarios’，刪除括號並沒有解決問題

EDIT2：新增AdicionarUsuario和Usuario組件

EDIT3：這裏的的jsfiddle https://jsfiddle.net/JuanDavid31/69z2wepo/88446/

，我需要當孩子COM重新渲染應用程序組件ponent問我，問題是，當ajax完成時，子組件不會成百。任何幫助？

來源

2017-10-21 JuanDavid

你可以發佈'AdicionarUsuario'代碼嗎？ – palsrealm

我不完全確定應用程序應該做什麼，因爲它是西班牙文，但這裏是新的小提琴https://jsfiddle.net/smlacerda5/69z2wepo/88474/ 我不得不刪除其中一個組件，因爲它被提供了一些關於Cancionar？一切看起來不錯，除了你有一些函數（）{//'this'關鍵字在這裏是窗口}並且你需要（）=> {//'this'關鍵字是這裏的組件} – stevelacerda7

非常感謝！這是我需要的 – JuanDavid

你實際上是停留在循環。這不是一個很好的錯誤信息，但是發生的事情是，你在組件中調用this.pedirUsuarios（），然後設置狀態，然後重新顯示，再次調用this.pedirUsuarios，然後重新顯示，等等。我不知道你是否試圖通過功能pedirUsuarios作爲道具，或通過usuarios下來。如果您想要傳遞該功能，請按照以下操作。如果你想傳遞數據，只需要將render.pedirUsuarios改爲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)); 
}

來源

2017-10-21 02:48:29 stevelacerda7

對不起，說這是行不通的，還是一樣的 – JuanDavid

然後檢查你的孩子的組件。如果可以的話，添加一個jsfiddle，我會看看。 – stevelacerda7

添加小提琴。 – JuanDavid

您需要更改

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

到

<AdicionarUsuario pedirUsuarios={this.pedirUsuarios}/>

額外()在你的電話是造成反覆渲染和錯誤。

EDIT1：您還需要在這裏做同樣的改變

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

來源

2017-10-21 02:47:12 palsrealm

仍然是同樣的錯誤，我不知道爲什麼。 – JuanDavid

設置家長狀態

回答

相關問題