Question

我正在尝试将实时数据库中的一组数据输出到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));
  }

这是我从数据库中提取的数据。我希望能够显示每个项目的名称，ID等。这是从服务器导出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>
);
}

-更新

最上面的三个是我可以在react中使用的，最下面的三个是使用伪数据，这是我希望从JSON数据中获得的输出，该数据已从firebase服务器应用于状态。

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

我可以输出此代码显示的前三名，上面的所有其他代码相同：

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

Answer 1

这应该为您工作。取自here。此外，在呈现列表之前无需检查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> );。如果列表中没有要渲染的内容，则不会渲染任何内容。此外，列表一旦填充，它就会反映在视图中。

soup.find('span', attrs={'style': "font-family: b'Times-Bold'; font-size:13px"}).text

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

1 个答案: