Блог

Главная - Вопросы по программированию - Невозможно корректно отобразить данные

Невозможно корректно отобразить данные

#javascript #reactjs #api #rest #mapping

#javascript #reactjs #API #отдых #отображение

Вопрос:

Я новичок в React.js разработка и нужна помощь в решении этой проблемы. Я создал сервис с использованием FastAPI, который выполняет ряд объявлений SQL SELECT для базы данных Oracle, принимает результаты и предоставляет их в виде REST API с использованием формата данных JSON.

В веб-браузере Chrome я вижу эту информацию, когда выполняю GET запрос к API: [API GET results][1]

Следовательно, API возвращает результаты правильно. Чтобы показать их все в моем приложении React, я создал этот компонент:

 import React, {Component} from 'react';


export default class App extends React.Component {

  state = {
    loading: true,
    pedidos: []
  }

  async componentDidMount() {
    const url = "http://localhost:8000/pedidos-bloqueados/";
    fetch(url)
    .then(response => {
      return response.json();
    })
    .then(d => {
      this.setState({ pedidos: [d], loading: false });
    })
    .catch(error => console.log(error))
  }

  render() {
    return (
      <div>
        { this.state.loading? <div>Carregando...</div> : <div><li> Cliente: * {(this.state.pedidos.map((pedido, index)=>(this.state.pedidos[index]))).map((p, i)=> p['cliente'])}</li></div> } *
      </div>
    );
  }
}

Оказывается, что при выполнении функции map() внутри метода render() отображается только следующая информация:

Cliente:

Без каких-либо дополнительных данных. И компоненту не разрешено выполнять цикл for() внутри метода render(), что, возможно, могло бы отображать объекты, закодированные в списке JSON.

Я думаю, что проблема в фрагменте: { this.state.loading? <div>Loading...</div> : <div><li> Cliente: {(this.state.pedidos.map((pedido, index)=>(this.state.pedidos[index]))).map((p, i)=> p['cliente'])}</li></div> }

Как я должен изменить свой код, чтобы отображать свойства каждого объекта в списке при рендеринге компонента? (Примечание: cliente — это *** всего лишь один из атрибутов объекта JSON — есть и другие, такие как vendedor, pedido и так далее… Но, если мне удастся перечислить это поле, я смогу повторить поведение для других).

Я ОЧЕНЬ благодарен вам за любую помощь в этом вопросе! [1]: https://i.stack.imgur.com/XHuN3.png

Комментарии:

1. Не могли бы вы показать нам, что console.log(this.state.pedidos) возвращает в целом? Или у вас есть фрагмент для просмотра?

2. @ale917k, спасибо за быстрый ответ. Консоль отображает те же данные из прикрепленного изображения: [ссылка] ( i.stack.imgur.com/XHuN3.png ) .

3. Я думаю, проблема в том, как вы отображаете эти данные — попробуйте следующее: { this.state.pedidos.map(pedido => pedido.cliente) } — Таким образом, вы практически перебираете каждый объект в массиве, и из каждого объекта мы возвращаем свойство «cliente».. Дайте мне знать, если это сработает, поэтому я напишу на него правильный ответ

4. Я сделал, как указано, но, к сожалению, теперь я получаю сообщение об ошибке «Свойство ‘cliente’ не существует для типа ‘never'». Пожалуйста, дайте мне знать ваши соображения по поводу этой ошибки.

Метки: