Вывод данных JSON в подпорки, извлеченные из базы данных FireBase - PullRequest
Новая
       28

Вывод данных JSON в подпорки, извлеченные из базы данных FireBase

0 голосов
/ 21 сентября 2018

Я пытаюсь вывести набор данных из базы данных в режиме реального времени в элементы HTML, у меня нет проблем с получением данных с сервера и использованием setState для сохранения данных.У меня есть собственный объект HTML из функционального компонента, который будет выводить реквизиты, но я не могу отобразить объект и внутренние объекты.

Вот код, отвечающий за извлечение данных из базы данных: 

  componentDidMount() {
    axios.get('./tasks.json')
      .then(response => {
        const fetchedTasks = [];
        for (let key in response.data) {
          fetchedTasks.push({
            ...response.data[key],
            key: key
          });
        }
        this.setState((prevState, props) => {
          return {
            taskList: fetchedTasks
          }
        } )
      })
      .catch(error => console.log(error));
  }

И это данные, которые я извлекаю из базы данных.Я хочу иметь возможность отображать каждый элемент по его имени, идентификатору и т. Д. Это экспорт данных JSON с сервера, это копирование в состояние моего компонента класса с помощью вызова axios.get 'Past.js'

    {
      "tasks" : {
        "09182018" : {
          "-LMgzJGM78f0BHbPf8cc" : {
            "hours" : 0,
            "id" : "2018-09-18T14:02:25.022Z",
            "minutes" : 0,
            "name" : "sadflkjdsalkf",
            "seconds" : 2,
            "start" : "2018-09-18T14:02:22.508Z"
          },
          "-LMgzaEYe0tcCjpxOuPU" : {
            "hours" : 0,
            "id" : "2018-09-18T14:03:38.635Z",
            "minutes" : 0,
            "name" : "safd",
            "seconds" : 2,
            "start" : "2018-09-18T14:03:36.353Z"
          }
        },
        "09192018" : {
          "-LMm7EoPnNdQLrZ5Rg62" : {
            "hours" : 0,
            "id" : "2018-09-19T13:59:31.361Z",
            "minutes" : 0,
            "name" : "sadf",
            "seconds" : 2,
            "start" : "2018-09-19T13:59:29.281Z",
            "user" : "placeholder"
          }
        },
        "09212018" : {
          "-LMve6ihcRX_uZfvBcaC" : {
            "hours" : 0,
            "id" : "2018-09-21T10:24:06.504Z",
            "minutes" : 0,
            "name" : "sadfsd",
            "seconds" : 2,
            "start" : "2018-09-21T10:24:03.841Z",
            "user" : "placeholder"
          },
          "-LMvnBBAWaHaBiGW5VMK" : {
            "hours" : 0,
            "id" : "2018-09-21T11:03:44.420Z",
            "minutes" : 0,
            "name" : "hello",
            "seconds" : 14,
            "start" : "2018-09-21T11:03:29.802Z",
            "user" : "placeholder"
          }
        }
      }
    }

Я безуспешно пытался выполнить вызовы .map () для состояния, сопоставляя вложенный элемент, выбрасывая 'array.map не является функцией'.Вот код, который у меня есть на данный момент: 

render() {
let outPutItems = [];

if (this.state.loading === false) {
  outPutItems = this.state.taskList.map(array => array.map(item => {
    <CompleteTask
      id={item.id}
      taskName={item.name}/>
  })
)}

return (
  <div className="Past">
    <h1>Past Tasks</h1>
      {outPutItems}
      <button onClick={this.collectTasks}>Log the TaskList!</button>
  </div>
);
}

-UPDATE

Три верхние - это то, что я могу использовать в реакции, а нижнее - пустышкаdata и является моим желаемым выводом из вышеприведенных данных JSON, которые были применены к состоянию с сервера firebase.

верхний вывод с методом карты, нижний с использованием данных-заполнителей из состояния

Я могу вывести три верхние, показанные с этим кодом, все остальные коды выше такие же: 

      {this.state.taskList.map((outer, index) => (
        <CompleteTask
          taskName={outer.key}
        />
      ) )
    }

1 Ответ

0 голосов
/ 21 сентября 2018

Это должно работать для вас.Взято из здесь .Кроме того, нет необходимости проверять loading == false перед отображением списка.Если в списке ничего не отображается, ничего не будет отображаться.Кроме того, как только список заполнится, он отобразится в представлении. 

return (
    <div className="Past">
      <h1>Past Tasks</h1>
      {this.state.taskList.map((item, index) => (
        <CompleteTask id={item.id} taskName={item.name}/>
      )}
      <button onClick={this.collectTasks}>Log the TaskList!</button>
    </div>
);
...