将JSON数据输出到从FireBase数据库提取的道具中

Question

I am attempting to output a set of a data from a real-time database into html elements, I have no issues in taking the data from the server and using setState to save the data. I have a custom HTML object from a functional Component that will output props, but I am unable to map the object and the inner objects.

Here is the code responsible for pulling the data from the database:

  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));
  }

And this is the data I am pulling from the database. I want to be able to display each item per it's name, id etc. This is an export of the JSON data from the server, this is the copied into the state of my class component via the axios.get call '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"
          }
        }
      }
    }

I have attempted to run .map() calls on the state with no luck, mapping the nested item throws 'array.map is not a function'. This is the code I have so far:

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

The top three are what I am able to use in react and the bottom is using dummy data and is my desired output from the JSON data above which has been applied to the state from the firebase server.

top output with map method, bottom using placeholder data from state

I am able to output the top three shown with this code, all other code above is the same:

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

Answer 1

This should work for you. Taken from here . In addition, theres no need to check if loading == false before rendering a list. If there is nothing in the list to be rendered, nothing will render. Also, as soon as the list is populated it will reflect in the view.

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>
);