response.map() 不是 reactjs 中的函数答案

【问题标题】：response.map() is not a function in reactjsresponse.map() 不是 reactjs 中的函数
【发布时间】：2022-01-10 16:36:33
【问题描述】：

您好，我正在使用axios 拨打API。它正在返回数据。我用来填充表格的数据。但它给出了错误。

  const [response, setResponse] = useState([]);
  const [flag, setFlag] = useState(false);

await axios.get(`http://localhost:3000/api/certificates?page=${page}`,{
              params: param,
          }).then(res=>{
             console.log(res.data);
             setResponse(res.data);
             setFlag(true);
          })

然后我使用对table 的响应来填充数据。仅当 flag 变为 true 时才会填充 table。

<div className="col-md-10 container">
          { flag && (
                <table className="table table-bordered ">
                  <tbody>
                    { flag && response.map((certificate: Certificate, index: number) => (
                      <tr>
                      <td>{certificate.certifcateNo}</td>
                      <td>{certificate.protoCOlNo}</td>
                      </tr>
                      }
                  </tbody>
                </table>
         </div>

我的 API 在邮递员的输出下方返回

{
    "data": [
        {
            "id": "cace4b0c-2836-412a-be60-78f726917ff6",
            "createdAt": "2021-12-03T21:06:14.540Z",
            "modifiedAt": "2021-12-03T21:06:14.540Z",
            "deletedAt": null,
            "certificateNo": 1,
            "requestStatus": "DRAFT",
            "sponser": "Onkar",
            "address": "JBP",
            "address2": "BUSINESS BAY",
            "zipCode": "40013",
            "city": "MH",
            "protoColNo": "123",
            "molecules": "Shweta",
            "unAuthMolecule": "NO",
            "phaseOfTrial": 1,
            "noOfSubjects": "5",
            "startDate": "2011-11-09",
            "endDate": "2012-11-09",
            "personInCharge": "Deepali",
            "country": "India",
            "comments": "I am Genius",
            "attachedFile": "string"
        },
        {
            "id": "91dfa4e3-d7f7-4671-b3e3-ba90c6454a1a",
            "createdAt": "2021-12-03T21:06:22.690Z",
            "modifiedAt": "2021-12-03T21:06:22.690Z",
            "deletedAt": null,
            "certificateNo": 2,
            "requestStatus": "DRAFT",
            "sponser": "Onkar",
            "address": "JBP",
            "address2": "BUSINESS BAY",
            "zipCode": "40013",
            "city": "MH",
            "protoColNo": "123",
            "molecules": "Shweta",
            "unAuthMolecule": "NO",
            "phaseOfTrial": 1,
            "noOfSubjects": "5",
            "startDate": "2011-11-09",
            "endDate": "2012-11-09",
            "personInCharge": "Deepali",
            "country": "India",
            "comments": "I am Genius",
            "attachedFile": "string"
        },
        {
            "id": "c84d7bce-cdcb-4984-89a2-ad2291651867",
            "createdAt": "2021-12-03T21:06:23.398Z",
            "modifiedAt": "2021-12-03T21:06:23.398Z",
            "deletedAt": null,
            "certificateNo": 3,
            "requestStatus": "DRAFT",
            "sponser": "Onkar",
            "address": "JBP",
            "address2": "BUSINESS BAY",
            "zipCode": "40013",
            "city": "MH",
            "protoColNo": "123",
            "molecules": "Shweta",
            "unAuthMolecule": "NO",
            "phaseOfTrial": 1,
            "noOfSubjects": "5",
            "startDate": "2011-11-09",
            "endDate": "2012-11-09",
            "personInCharge": "Deepali",
            "country": "India",
            "comments": "I am Genius",
            "attachedFile": "string"
        },
        {
            "id": "0755d2f9-50df-4b5a-a863-d173a12b45b5",
            "createdAt": "2021-12-03T21:06:23.762Z",
            "modifiedAt": "2021-12-03T21:06:23.762Z",
            "deletedAt": null,
            "certificateNo": 4,
            "requestStatus": "DRAFT",
            "sponser": "Onkar",
            "address": "JBP",
            "address2": "BUSINESS BAY",
            "zipCode": "40013",
            "city": "MH",
            "protoColNo": "123",
            "molecules": "Shweta",
            "unAuthMolecule": "NO",
            "phaseOfTrial": 1,
            "noOfSubjects": "5",
            "startDate": "2011-11-09",
            "endDate": "2012-11-09",
            "personInCharge": "Deepali",
            "country": "India",
            "comments": "I am Genius",
            "attachedFile": "string"
        },
        {
            "id": "05c1ce23-eaf6-4ff9-aa5c-5f0554a22205",
            "createdAt": "2021-12-03T21:06:24.032Z",
            "modifiedAt": "2021-12-03T21:06:24.032Z",
            "deletedAt": null,
            "certificateNo": 5,
            "requestStatus": "DRAFT",
            "sponser": "Onkar",
            "address": "JBP",
            "address2": "BUSINESS BAY",
            "zipCode": "40013",
            "city": "MH",
            "protoColNo": "123",
            "molecules": "Shweta",
            "unAuthMolecule": "NO",
            "phaseOfTrial": 1,
            "noOfSubjects": "5",
            "startDate": "2011-11-09",
            "endDate": "2012-11-09",
            "personInCharge": "Deepali",
            "country": "India",
            "comments": "I am Genius",
            "attachedFile": "string"
        }
    ],
    "meta": {
        "total": 16,
        "page": "1",
        "last_page": 4
    }
}

我做错了什么？

【问题讨论】：

你控制台记录了你的响应状态并得到了一个数组吗？
你只是我意识到它是作为对象来的。我可以只将数据设置为响应吗？因为数据是对象内部的数组。
我不确定，但我认为您应该将第一个代码段中的代码更改为 setResponse(res.data.data);。如果这不起作用，您可以使用记录的值更新您的问题，以便我仔细查看。
我认为您只是将 axios 数据道具与@kianjalilian 建议的响应道具混淆了

标签： javascript reactjs typescript user-interface axios

【解决方案1】：

const {data} = await axios.get(`http://localhost:3000/api/certificates?page=${page}`,{
              params: param,
          })
       console.log(data.data);
       setResponse(data.data);
        setFlag(true);

【讨论】：

【解决方案2】：

如果您只是太快地编写代码，但您缺少右括号。

{ flag && response.map((certificate: Certificate, index: number) => (
  <tr>
     <td>{certificate.certifcateNo}</td>
     <td>{certificate.protoCOlNo}</td>
  </tr>
))} <-- here

【讨论】：

问题是我的响应进入对象，但响应期望作为一个数组。对象数据内部是一个数组。如何将该数组设置为响应？
也许你应该写response.data.data
那行不通