数据不是函数[关闭]答案

【问题标题】：data is not a function [closed]数据不是函数[关闭]
【发布时间】：2020-12-02 04:30:05
【问题描述】：

我在控制台收到此错误。我搜索了论坛，所有的解决方案都没有解决我的问题。我正在尝试检索数据并显示在表格前端。数据记录成功。但是我很困扰迭代以显示在桌子上。下面是日志输出

import React, {  useState, useEffect, Component } from 'react'
import Layout from '../../core/Layout'
import axios from 'axios'
import {  getCookie, isAuth, signout } from '../../auth/helpers';


 export default class find extends Component {
 constructor(props) {
    super(props);
    this.state = {
        Jobs: []
    };
  }
     getJobsData() {
      axios
        .get(`${process.env.REACT_APP_API}/projects`, {})
        .then(res => {
            const data = res.data
            console.log('List of jobs', data)
            const jobs = data.map((u =>
              <ul key={Math.random()}>
              <li>{u._id}</li>
              <li>{u.title}</li>
              <li>{u.addedBy}</li>
             
              </ul>
              ))
          this.setState({jobs: data})

        })
        .catch((error) => {
            console.log(error)
        })

}
componentDidMount(){
    this.getJobsData()
}
render() {

    return (
      <Layout>
        <div>   
          <p>List of available jobs</p>
     {this.state.jobs}
        </div>
        </Layout>
     )
  }
}

【问题讨论】：

试试data.response.map(...
@David "data.map is not a function" 是错误，确切的问题标题已经存在并且是一个类似的问题stackoverflow.com/questions/30803168/data-map-is-not-a-function
这能回答你的问题吗？ data.map is not a function
上面的日志屏幕显示它的响应键和值的对象是数组。
@ephantusokumu 不，如果您看到data 不是数组并且该数组位于@987654328 上的属性中，那么其他问题应该回答您的问题@。这与代码不起作用的原因完全相同。

标签： javascript arrays reactjs axios

【解决方案1】：

import React, {  useState, useEffect, Component } from 'react'
import Layout from '../../core/Layout'
import axios from 'axios'
import {  getCookie, isAuth, signout } from '../../auth/helpers';


 export default class find extends Component {
 constructor(props) {
    super(props);
    this.state = {
        jobs: []
    };
  }
     getJobsData() {
      axios
        .get(`${process.env.REACT_APP_API}/projects`, {})
        .then(res => {
            const data = res.data.response
            console.log('List of jobs', data)
            const jobs = data.map((u =>
              <ul key={Math.random()}>
              <li>{u._id}</li>
              <li>{u.title}</li>
              <li>{u.addedBy}</li>
             
              </ul>
              ))
          this.setState({jobs: data})

        })
        .catch((error) => {
            console.log(error)
        })

}
componentDidMount(){
    this.getJobsData()
}
render() {

    return (
      <Layout>
        <div>   
          <p>List of available jobs</p>
     {this.state.jobs}
        </div>
        </Layout>
     )
  }
}

您的数据是带有响应键的对象，例如{response: [1, 2, 3]}。尝试将您的数据变量初始化更改为const data = res.data.response

【讨论】：

这是执行此操作后的错误消息 Error: Objects are not valid as a React child (found: object with keys {active, _id, title, category, duration, durationSys, description, budget, addedBy ，文件，createdAt，updatedAt，__v}）。如果您打算渲染一组子项，请改用数组。
状态键不区分大小写吗？你的构造函数中有Jobs: []，后来你分配给this.state.jobs。尝试更新版本。
@ephantusokumu 这是一个完全不同的问题。