时间戳

首页 > 解决方案 > 从组件反应中的另一个类获取对象

reactjs - 从组件反应中的另一个类获取对象

问题描述

早上好，我是新手，我正在努力解决问题。我找到了一个 spotify 按钮，它从您的cliendID. 看起来像这样

import React from 'react';
import ReactDOM from 'react-dom';
import SpotifyLogin from 'react-spotify-login';
import { clientId, redirectUri } from './settings';

const onSuccess = response => console.log(response);
const onFailure = response => console.error(response);

ReactDOM.render(
  <SpotifyLogin clientId={clientId}
    redirectUri={redirectUri}
    onSuccess={onSuccess}
    onFailure={onFailure}/>,
  document.getElementById('example')
);

我想得到的数据是response来自它，因为它有access_token. 作为新的反应，我想我可以制作一个带有吸气剂的课程。

import React, { Component, setState, useState } from 'react';
import SpotifyLogin from 'react-spotify-login';
import { Link } from 'react-router-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {
            onSuccess : {}
        }
    }

    getData() {
        return this.onSuccess;
    }

    render(){
        return (
            <div>
                <Link to="/home">
                    <SpotifyLogin buttonText="Login" clientId='myinfo'
                    redirectUri='http://localhost:3000/home'
                    onSuccess={this.onSuccess}/>
                </Link>
            </div>
        )
    }
}

export default App

但在我的另一个组件中，当我尝试做一个

var toto = new App
console.log(toto.getData);

都是空的。此外，我想知道是否有一种方法可以让我避免在每次需要访问我的数据时在我的组件中声明一个新对象。例如，我将传递props给我的类，所以如果我在声明它的实例的文件中调用这个组件App就可以了，但是如果我在另一个文件中使用这个组件并且没有实例App，我怎么会有访问这些数据。有办法global吗？

标签： reactjs

解决方案

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

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

import React, { Component, setState, useState } from 'react';
import SpotifyLogin from 'react-spotify-login';
import { Link } from 'react-router-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {
            responseObject : {}
        }
    }

    onSuccess(response) {
        this.setState({ responseObject: response}) 
    }

    getData() {
        return this.responseObject;
    }

    render(){
        return (
            <div>
                <Link to="/home">
                    <SpotifyLogin buttonText="Login" clientId='myinfo'
                    redirectUri='http://localhost:3000/home'
                    onSuccess={this.onSuccess}/>
                </Link>
            </div>
        )
    }
}

export default App

虽然，关于你的第二个问题，在更高的类中定义这个函数会更有意义onSuccess，并像你建议的那样通过道具传递这个函数，这样你就不必使用这个getData函数了。因此，您可以这样做：

class SpotifyContainer extends Component {
    render(){
        return (
            <div>
                <Link to="/home">
                    <SpotifyLogin buttonText="Login" clientId='myinfo'
                    redirectUri='http://localhost:3000/home'
                    onSuccess={this.props.onSuccess}/>
                </Link>
            </div>
        )
    }
}

因此，您可以通过onSuccessprops 将其作为函数传递。

就个人而言，我也建议使用 React Hooks / Functional 组件，因为我发现它们比类组件更容易理解，尤其是在您不打算使用状态的情况下。所以你可以改为写：

function SpotifyContainer(props) {
    return (
            <div>
                <Link to="/home">
                    <SpotifyLogin buttonText="Login" clientId='myinfo'
                    redirectUri='http://localhost:3000/home'
                    onSuccess={props.onSuccess}/>
                </Link>
            </div>
        )
}

export default SpotifyContainer;

推荐阅读