时间戳

首页 > 解决方案 > 如何将特定 API 数据从一个组件发送到另一个在 React 组件中调用的组件

reactjs - 如何将特定 API 数据从一个组件发送到另一个在 React 组件中调用的组件

问题描述

我是新手，我在将数据发送到其他组件文件时遇到了一些问题。我在 if 语句中检查来自后端 Api 的登录用户，如果它是真的，那么它应该将 user_Id 发送到另一个组件文件。但不能在另一个类组件中导出。有什么解决办法。请帮助提前谢谢。

class Login extends Component<RouteComponentProps> {
  state = {
    email: '',
    password: '',
    isChecked: false,
    user_Id: null,
  }
  async handleFormSubmit(event) {
    event.preventDefault();
    const postData = {
      email: this.state.email,
      password: this.state.password
    }
    const response = await AuthService.doUserLogin(postData);
    if (response.code==0) {
      AuthService.handleLoginSuccess(response, this.state.isChecked);
      this.props.history.push('/home');
      return(this.setState({user_Id:response.result.user_id}));
    }
    else {
      alert(response.description)
    }
  }  
}

标签： reactjstypescript

解决方案

如果要向其传递数据的组件是子组件，则应将其作为道具传递。

例如，该组件将在父组件内呈现，并从其接收一些道具。（请注意，下面显示的组件将位于其父组件的 render() 部分中。）

<DeleteUserModal showDeleteUserModal={this.state.showDeleteUserModal} closeDeleteUserModal={this.closeDeleteUserModal} userDeleted={this.state.userDeleted} deleteUser={this.deleteUser} handleDismiss={this.handleDismiss} />

例如 showDeleteUserModal={this.state.showDeleteUserModal} ，意味着在子组件中您将能够使用该状态访问该状态。

this.props.showDeleteUserModal

您也可以通过这种方式传递函数并调用它们

如果您有一个复杂的应用程序结构，其中将组件向下传递给子级很混乱，因为有很多组件，您还可以将状态存储在全局环境中，例如 redux

推荐阅读