Question

我从我的react应用程序的快速后端接收到JSON对象，但是我不知道如何访问其属性之一。我需要读取用户名字段。

由于我已将JSON对象保存在我的反应状态下，因此我尝试了this.state.datos.username（返回undefined）和this.state.datos[0].username（返回“无法读取未定义的属性”错误）。我已经检查了有关该主题的一些答案，但也许我有点。笨拙，我无法完成这项工作。

这是我从express获取的方法，以JSON格式发送用户的数据。

app.get("/datosusuario", function(req, res, next) {
  res.json([
    {
      username: username,
      name: name,
      surname: surname,
      telephone: telephone,
      mail: mail,
      fax: fax
    }
  ]);
});

在浏览器中签入时，它显示此对象：

[{“用户名”：“未知”，“名称”：“此人”，“姓氏”：“不存在”，“电话”：“ 123123123”，“邮件”：“ randomemail@gmail.com “，”传真“：” 584758924375892345“}]

此外，这是我的constructor和我的componentDidMount方法：

  constructor(props) {
    super(props);
    this.state = {
      datos: []
    };
  }

componentDidMount(){
  fetch('/datosusuario')
  .then(userdata => userdata.json())
  .then(data => {
    console.log(data);
    this.setState({ datos:data })
    console.log(this.state.datos);
  })
}

console.log(this.state.datos)和console.log(data)显示相同的内容：

[{…}]
0: {username: "Unknown", name: "This person", surname: "does not exist", telephone: "123123123", mail: "randomemail@gmail.com", …}
length: 1
__proto__: Array(0)

Chrome的React扩展也显示相同的内容。

我需要在导航栏组件中显示一条Welcome{username}消息，看起来像这样（我正在使用引导程序）：

        <Navbar bg="primary" variant="dark">
          <Navbar.Brand href="/">Tecnolab</Navbar.Brand>

          <Nav className="justify-content-end">
            <Nav.Item>
              <Nav.Link href="/login">No está autenticado</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="/login">Login</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="/login">
                Welcome {this.state.datos.username}
              </Nav.Link>
            </Nav.Item>
          </Nav>
        </Navbar>

Answer 1

根据控制台输出，

this.state.datos是对象的数组，因此您应将用户名提取为this.state.datos[0].username。

Answer 2

将res.json更新为：

res.json({
  username: username,
  name: name,
  surname: surname,
  telephone: telephone,
  mail: mail,
  fax: fax
});

我如何从React中的Json对象读取单个元素？

2 个答案: