时间戳

首页 > 解决方案 > 我如何在反应中从 Json 对象中读取单个元素？

javascript - 我如何在反应中从 Json 对象中读取单个元素？

问题描述

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

由于我已将 JSON 对象保存为我的反应状态，因此我尝试了this.state.datos.username(returns undefined) 和this.state.datos[0].username(returns a "cannot read property of undefined" 错误)。我已经检查了有关此主题的一些答案，但也许我有点。笨拙，我无法完成这项工作。

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

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

在浏览器中检查时，它会显示此对象：

[{“用户名”：“未知”，“姓名”：“此人”，“姓”：“不存在”，“电话”：“123123123”，“邮件”：“randommail@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>

标签： javascriptjsonreactjsexpress

解决方案

this.state.datos是根据控制台输出的对象数组this.state.datos[0].username，因此您应该将用户名获取为.

推荐阅读