如何将数据从一个组件传递到另一个组件？

Question

我有两个js文件，包括登录和侧栏。

在login.js(类组件)中，它将调用loginAction来执行API调用并获取响应数据(id、角色、用户名)。

  import LoginAction from auth.js
  ...
  handleSubmit(event) {
    event.preventDefault();   
    var response = LoginAction(this.state)
  }

LoginAction在auth.js中

export function LoginAction(data) {
    const loginName = data.loginName;
    const password = data.password;

    var response = Login(loginName, password).then(response => {
        if (response.data.errorCode === "") {
            sessionStorage.setItem("token", response.data.data.token)
            return {passwordError: null, loginNameError: null, isLoggedOn: true, role: response.data.data.isAdmin};
        } else {
            return formatError(response.data);
        }
    })
    return response;
};

下面是authservice.js中的登录

export const Login = (loginName, password) => {
    const postData = { loginName, password }
    console.log(postData);

    return Axios.post("http://localhost:8080/login", postData, header);
}

如何将响应传递给sidebar.js(类组件)？我想在侧边栏上显示用户的角色。

if (data.isLoggedOn) {
        console.log("routing to /employee")
        this.props.router.navigate("/employee", { state: { "id": id, "role": role } })
      }

我尝试使用状态来传递数据，但是在第一次加载之后不能将角色加载到侧栏。该角色仅在我再次加载侧栏页时显示。

Answer 1

您可以在公共父组件中创建状态，并传递一个设置该状态的函数。下面是一个简单的示例，我在应用程序中定义了一个状态user，并定义了设置其状态的login()。然后，我将login()作为道具传递给登录按钮，并将user作为道具传递给侧栏。CodeSandbox

import React, { Component } from "react";

export default class App extends Component {
  constructor(){
    super();
    this.state = {user: null}
  }

  login(user) {
    this.setState({user})
  }

  render() {
    return (
      <div className="App">
      <Login loginHandler={(user)=>this.login(user)}/>
      <Sidebar user={this.state.user}/>
    </div>
  );
}
}

class Sidebar extends Component{
    render(){
      return(
        <div className="sidebar">Hey {this.props.user}</div>
      )
    }
} 

class Login extends Component{
  render(){
    return(
      <button onClick={()=>this.props.loginHandler('Foo')}>Login</button>
    )
  }
}