虽然this.state是一个Javascript对象，但即使将状态传递给有数据的状态，为什么状态也为null？

Question

我有以下代码（见下文）

我希望它显示由firstName和lastName组合而成的用户名。 为什么下面的代码不起作用？

我希望它能显示

欢迎Daggie Blanqx！

class Header extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            firstName : 'Daggie',
            lastName :  'Blanqx',
            userName : ()=>(this.state.firstName + this.state.lastName)
        }


    }

    render(){
        return(
            <div>
                <p> Welcome {this.state.userName} !</p>
            </div>
            )
    }
}

Answer 1

您缺少（）

<p> Welcome {this.state.userName()} !</p>

也不需要为此定义函数直接获得这样的结果

<p>Welcome , {this.state.firstName} {this.state.lastName} !</p>

Answer 2

似乎您正在向状态插入一个函数，因此您需要调用它来获取结果。 通常不建议将这样的功能置于状态。 但是，如果您仍然想使用该方法，请尝试以下操作：

<p>Welcome , {this.state.userName()} !</p>

更好的方法是从状态中删除该函数并执行以下操作：

getUserName() {
   return this.state.firstName + this.state.lastName
}

然后在您的模板中：

<p>Welcome , {this.getUserName()} !</p>

Answer 3

在您的示例中，您正在访问函数this.state.userName您需要像this.state.userName()这样调用它
this.state.userName将返回您需要在函数末尾添加()的function变量，以获取该函数的return值
您了解为什么它不起作用
尝试避免在状态对象中使用方法

Answer 4

它应该引发错误，因为您正在尝试与状态进行交互，但状态尚未初始化。 为此，请使用componentDidMount() + prevState或将其放入render() ：

变体1 ：

import React, { Component } from 'react'

export default class Header extends Component {

    constructor(props) {
        super(props)
        this.state = {
            firstName : 'Daggie',
            lastName :  'Blanqx'
        }


    }

    render() {
        return(
            <div>
                <p> Welcome {this.state.firstName + this.state.lastName} !</p>
            </div>
            )
    }
}

变体2 ：

import React, { Component } from 'react'

export default class Header extends Component {

    constructor(props) {
        super(props)
        this.state = {
            firstName : 'Daggie',
            lastName :  'Blanqx',
            fullName: ''
        }
    }
    componentDidMount() {
      this.setState(prevState => ({
        fullName: prevState.firstName + prevState.lastName
      }))
    }

    render() {
        return(
            <div>
                <p> Welcome {this.state.fullName} !</p>
            </div>
            )
    }
}