Javascript 在简单组件中获取状态值-类与函数（类工作，函数不工作）。为什么？

为了通过

state

获取值，我举了一个简单的例子。我得到了两个简单的组件——1）基于类2）基于函数

我是一个新的反应，所以尝试两种选择。对于类来说，它是工作的，对于函数来说，它不是。请帮忙

案例一：班级（工作）

import React，{Component}来自'React'；
类HomeClass扩展组件{
状态={
姓名：“杰克·罗杰斯”，
年龄:25岁，
城市：“纽约”
}
render（）{
返回(
{this.state.name+“/”+this.state.age+“/”+this.state.city}

)
}
}
导出默认HomeClass；

案例二：功能性（x不工作）

import React, { useState, useEffect } from 'react';

const HomeFunctional = () => {

  [details, setDetails] = useState({name: "Jack Rogers", age: 29, city: "New York"})

  return (
    <div>
      <p>{this.details.name + "/" + this.details.age + "/" + this.details.city}</p>
    </div>
  )
}

export default HomeFunctional;

import React，{useState，useffect}来自“React”；
常量HomeFunctional=（）=>{
[details，setDetails]=useState（{姓名：“杰克·罗杰斯”，年龄：29岁，城市：“纽约”}）
返回(
{this.details.name+“/”+this.details.age+“/”+this.details.city}

)
}
导出默认HomeFunction；

错误：

import React, { useState, useEffect } from 'react';

const HomeFunctional = () => {

  [details, setDetails] = useState({name: "Jack Rogers", age: 29, city: "New York"})

  return (
    <div>
      <p>{this.details.name + "/" + this.details.age + "/" + this.details.city}</p>
    </div>
  )
}

export default HomeFunctional;

---

您需要使用

const

实例化，而不使用

此

请尝试以下操作：

const HomeFunctional = () => {
  const [details, setDetails] = useState({name: "Jack Rogers", age: 29, city: "New York"})

  return (
    <div>
      <p>{details.name + "/" + details.age + "/" + details.city}</p>
    </div>
  )
}

const HomeFunctional=（）=>{
const[details，setDetails]=useState（{姓名：“杰克·罗杰斯”，年龄：29岁，城市：“纽约”}）
返回(
{details.name+“/”+details.age+“/”+details.city}

)
}

---

我希望这有帮助

你在

[详细信息，

前面缺少

const

，我想他们认为海报应该从文档中了解到这个答案。你应该试试vscode，它会在你有语法错误时告诉你。可能是使用eslint插件，如果你计划使用react钩子。。