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

}

我得到了：＆＃34;只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState，replaceState或forceUpdate。这是一个无操作。＆＃34;

EDIT1 ：TypeError：无法读取属性＆＃39; pedirUsuarios＆＃39;未定义的，删除括号并没有解决问题。

EDIT2 ：添加了AdicionarUsuario和Usuario组件

EDIT3 ：这里是jsfiddle https://jsfiddle.net/JuanDavid31/69z2wepo/88446/

我需要在子组件请求i时重新呈现App组件，问题是当ajax完成时子组件不会是rendred。有什么帮助吗？

Answer 1

您需要更改

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

到

<AdicionarUsuario pedirUsuarios={this.pedirUsuarios}/>

您通话中的额外()会导致重复呈现和错误。

EDIT1 ：您还需要在此处进行相同的更改

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

Answer 2

你实际上陷入了困境。不是一个非常好的错误消息，但是发生的事情是你在组件中调用this.pedirUsuarios（），然后设置状态，然后重新呈现，再次调用this.pedirUsuarios，然后重新呈现，依此类推。我不知道你是否试图将功能pedirUsuarios作为道具传递下来，或者通过惯例向下传递。如果要将功能关闭，请执行以下操作。如果要向下传递数据，只需将渲染中的this.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));
}

将父状态设置为未安装的组件

2 个答案: