Home / Questions / 353003
Accepted
Cristian Budzicz
Asked: 2020-05-07 11:46:34 +0800 CST 2020-05-07 11:46:34 +0800 CST

React - 如何在 Axios 调用中与父组件通信

  • 772

我有一个名为app的组件，它负责渲染带有选项的菜单栏。选项之一是login。

当用户通过 axios 的请求成功登录时，我有兴趣返回一个表示登录成功的布尔变量。按照以下教程：链接我能够实现我附加的以下代码。

问题是它没有执行父级中的方法

实现了以下父应用程序组件：

class App extends React.Component {

constructor(props){
  super(props);
  this.state = ({
     isUserLogin: false
  })

  this.myCallback = this.myCallback.bind(this);
 }

 //funcion ques se ejecutaria cuando se retornen los datos
 myCallback = (dataFromChild) => {
  //  [...we will use the dataFromChild here...]
  alert('soy el padre' + dataFromChild);
 }

 // ref: https://gist.github.com/darklilium/183ce1405788f2aef7e8
 render() {
  return (
    <>
      <BrowserRouter>
        <>
          { (this.state.isLoggedIn) ? null : <NavBar /> }
          {/* <NavBar /> */}
            <div className="container">
              <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/login" component={Login} callbackFromParent={this.myCallback}/>
              </Switch>
            </div>
          <PiePagina />
        </>
      </BrowserRouter>
    </>
  );
}
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
 );

在其名为Login的子项中，我实现了以下逻辑（我复制了主要部分以使其不广泛）：

class Login extends React.Component {

constructor(props){
    super(props);

    this.state = ({
        username:'',
        password:'',
        errors: {},
        errorApi: ''
    })

    this.cambioUsername = this.cambioUsername.bind(this);
    this.cambioPassword = this.cambioPassword.bind(this);
    this.handleSubmit   = this.handleSubmit.bind(this); 
    this.consumirApiLogin = this.consumirApiLogin.bind(this);
    this.validarFormulario = this.validarFormulario.bind(this);
}
consumirApiLogin() {
    const payload={
        "_username":this.state.username,
        "_password":this.state.password,
    }
    axios.post(API_LOGIN, payload)
        .then(response => {
            // console.log(response.data.token);
            // this.setState({errorApi: response.data})
            // console.log(this.state.errorApi);
            sessionStorage.setItem('AccessToken', response.data.token);
            // INTENTO LLAMAR AL METODO DEL PADRE, PERO NO EJECUTA NADA
            // TAMPOCO GENERA UN ERROR EN LA CONSOLA
            this.props.callbackFromParent('hijo');
        })
        .catch(e => {
            if(e.response)
            {
                let error = '';
                error = e.response.data.message;
                this.setState({errorApi: error});
            }
        });
}

如果能指导我，万分感谢！

javascript

2 Answers

  1. Best Answer

    在您的路线声明中，您没有正确地将道具传递给子组件。

    如果您想在路由组件中将数据从父级传递给子级，您可以使用render prop ，它接收一个内联函数并返回组件以使用您指定的 props 进行渲染。

    您也可以将内联函数传递给 prop组件，<Route />但不建议像文档中所说的那样，因为它会在要渲染的组件上创建一个包装器组件，并且必须执行 mount 和 dismount 方法。

    出于这个原因，他们建议使用render返回要呈现的组件的 prop，而不是像在 prop 中那样创建不必要的包装器组件component。

     <Route 
    exact 
    path="/login" 
    render={() => <Login callbackFromParent={this.myCallback}/>} 
/>
    • 1

  2. 这是因为您将函数传递给 Route 而不是 Login，所以您有 2 个解决方案来解决这个问题：

    1.- 最好的：

    <Route exact path="/login" render={() => <Login callbackFromParent={this.myCallback} />}/>

    二。-

    <Route exact path="/login">
    <Login callbackFromParent={this.myCallback} />
</Route>

    这样方法到达Login，就可以正确执行了。

    • 1