Question

我正在尝试通过Spotify WebAPI将用户的Spotify帐户的用户名从我的父组件（在app.js中）传递到./components/header.js中的子组件。

将状态变量作为道具传递给组件时，会出现错误

TypeError：无法读取未定义的属性“名称”

我将发布主要组件，头组件和index.js文件的代码。在我的主要app.js文件中，您将在底部附近看到注释的代码。此代码按预期工作。它与我的Header组件基本相同，但没有包含在组件中。在此代码中，使用{this.state.serverData.user.name}可以按预期工作，并在网页上输出用户的用户名。另一种方法会出现上述错误。有什么建议吗？我是新来的反应。

App.js：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import queryString from 'query-string';
import Header from './Components/header';
import ButtonTest from './Components/buttonTest';


let textColor = 'orange'
let defaultStyle = {
  color: textColor
};


class App extends Component {

    constructor() {
        super();
        this.state = { serverData: {} }
    }
    componentDidMount() {
        let parsed = queryString.parse(window.location.search);
        let accessToken = parsed.access_token;

        fetch('https://api.spotify.com/v1/me', {
            headers: { 'Authorization': 'Bearer ' + accessToken }
        }).then((response) => response.json()).then(data => this.setState({ 
serverData: { user: { name: data.display_name } } }))



    }
    render() {

     const headerStyle = { color: 'orange', 'font-size': '50px' }
     return (
            <div className="App">


             <Header userName={this.state.serverData.user.name}/> 
             <ButtonTest/>

            </div>

         /*<div className="App"> 
                {
                    this.state.serverData.user ?
                        <div>
                            <h1 style={headerStyle}>
                                Welcome, 

                                    {this.state.serverData.user.name}
                            </h1>


                            <div>

                                <button onClick={() => window.location = 
'http://localhost:8080/clef.html'}
                                >Click here to search for song 
information</button>
                            </div>
                        </div> : <button onClick={() => window.location = 
'http://localhost:8888/login'}
                            style={defaultStyle}>Log in with Spotify</button>

             }
             <ButtonTest />

            </div>*/


        );
}
}




export default App;

header.js

import React, { Component } from 'react';


let textColor = 'orange'
let defaultStyle = {
    color: textColor
};

export default class Header extends Component {
    constructor(props) {
        super(props);

    }
    render() {
        const headerStyle = { color: 'orange', 'font-size': '50px' }
        return (
            <div className="App">
                {
                    this.props.userName ? 
                        <div>
                            <h1 style={headerStyle}>
                                Welcome,
              {
                                    this.props.userName}
                            </h1>


                            <div>

                                <button onClick={() => window.location = 
'http://localhost:8080/clef.html'}
                                >Click here to search for song 
information</button>
                            </div>
                        </div> : <button onClick={() => window.location = 
'http://localhost:8888/login'}
                            style={defaultStyle}>Log in with Spotify</button>
                }
            </div>
        );
    }
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import Header from './Components/header';

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

Answer 1

我怀疑您的问题出在这行：

<Header userName={this.state.serverData.user.name}/>

基本上，在初始化应用程序组件时，您有一个state.serverData = {}，因此在首次渲染时它将尝试访问user.name，并且由于尚未加载任何用户，因此会出现错误

您可以通过初始化状态以包括一个空用户对象来解决此问题。例如。

this.state = { serverData: { user: {} } }

或者您可以在通过道具时添加&&检查。

const sData = this.state.serverData
<Header userName={sData.user && sData.user.name}/>`

或者，如果您能够使用更新的?.语法（可选链接），则可以这样做

<Header userName={this.state.serverData.user?.name}/>

尝试在react

1 个答案: