javascript - 虽然 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>
            )
    }
}

标签： javascriptreactjs

Answer 1

您缺少 ()

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

也不需要为此定义一个函数，直接得到这样的结果

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