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

Question

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

  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 的响应来填充数据。 table 只有在 flag 变为真时才会被填充。

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

我做错了什么？

Answer 1

不知道你是不是写得太快了，但是你错过了右括号。

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

Answer 2

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

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

response.map() is not a function in reactjs

javascript

user-interface

typescript

reactjs

axios