Reactjs 从组件中的另一个类获取对象

Reactjs 从组件中的另一个类获取对象,reactjs,Reactjs,早上好, 我是个新来的反应者,我正在努力想办法解决问题。 我发现了一个spotify按钮,它从您的cliendID连接到spotify API。看起来像这样 从“React”导入React; 从“react dom”导入react dom; 从“react spotify login”导入SpotifyLogin; 从“./settings”导入{clientId,redirectUri}; const onSuccess=response=>console.log(response); con

早上好, 我是个新来的反应者,我正在努力想办法解决问题。 我发现了一个spotify按钮,它从您的
cliendID
连接到spotify API。看起来像这样

从“React”导入React;
从“react dom”导入react dom;
从“react spotify login”导入SpotifyLogin;
从“./settings”导入{clientId,redirectUri};
const onSuccess=response=>console.log(response);
const onFailure=response=>console.error(响应);
ReactDOM.render(
,
document.getElementById('示例')
);
我想从中获取的数据是
响应
,因为它有
访问令牌
。作为一个新手,我想我可以在课堂上加入一个能手

import React,{Component,setState,useState}来自'React';
从“react spotify login”导入SpotifyLogin;
从“react router dom”导入{Link}
类应用程序扩展组件{
构造函数(){
超级()
此.state={
onSuccess:{}
}
}
getData(){
返回此.onSuccess;
}
render(){
返回(
)
}
}
导出默认应用程序
但在我的另一个组件中,当我尝试

var toto=新应用程序
console.log(toto.getData);

都是空的。此外,我想知道是否有一种方法可以避免每次需要访问数据时在组件中声明新对象。例如,我将把
道具
传递给我的类,因此如果我在声明
应用程序
实例的文件中调用此组件就可以了,但是如果我在另一个文件中使用此组件,并且没有
应用程序
的实例,我如何访问此数据呢。是否有一种方法可以
global
it?

在我看来,您的类组件将有
这个。onSuccess
返回空,因为它从未被设置过。由于您已将
this.onSuccess
更改为状态变量,因此需要在某个时刻设置该状态。当前,渲染中的
onSuccess
函数将不起作用,因为它根本不是函数

因此,您需要在
getData
开始工作之前更改响应状态,例如:

import React,{Component,setState,useState}来自'React';
从“react spotify login”导入SpotifyLogin;
从“react router dom”导入{Link}
类应用程序扩展组件{
构造函数(){
超级()
此.state={
响应对象:{}
}
}
onSuccess(响应){
this.setState({responseObject:response})
}
getData(){
返回此.responseObject;
}
render(){
返回(
)
}
}
导出默认应用程序
不过,关于第二个问题,在更高的类中定义这个
onSuccess
函数,并像您建议的那样通过道具传递该函数,这样您就不必使用
getData
函数了。因此,你可以只做:

类SpotifyContainer扩展组件{
render(){
返回(
)
}
}
因此,您可以使用道具将
onSuccess
作为一个函数向下传递

就我个人而言,我建议也使用React钩子/函数组件,因为我发现它们比类组件更容易理解,尤其是在您不打算使用state的情况下。所以你可以写:

功能SpotifyContainer(道具){
返回(
)
}
导出默认容器;