Как я могу прочитать один элемент из объекта Json в реакции?

Question

Я получаю объект JSON из моего экспресс-бэкенда в моем приложении реагирования, но я не знаю, как получить доступ к одному из его свойств.Мне нужно прочитать поле имени пользователя.

Поскольку я сохранил объект JSON в своем состоянии реакции, я попытался this.state.datos.username (возвращает undefined) и this.state.datos[0].username (возвращает "не может прочитать свойствоundefined "ошибка).Я проверил некоторые ответы на эту тему, но, возможно, я вроде.неуклюже, и мне не удается заставить это работать.

Это мой метод get из express, отправляющий данные пользователя в формате JSON.

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

При проверке в браузере, он показывает этот объект:

[{"имя пользователя": "Неизвестно", "имя": "Этот человек", "фамилия": "не существует", "телефон": "123123123", "mail ":" randomemail@gmail.com "," fax ":" 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
});