在表格单元格中调用 javascript 函数答案

【问题标题】：Calling a javascript function inside a table cell在表格单元格中调用 javascript 函数
【发布时间】：2020-04-06 02:10:49
【问题描述】：

我一直在尝试调用表格单元格内的函数来动态生成一些数据。但一直低于错误。我不确定我是否在表格单元格中正确调用了已定义和 javascripts 函数。


    TypeError: patient.dob.getFullYear is not a function
(anonymous function)
C:/Users/Anand/OneDrive/clinic/client/src/components/ListPt.js:64
  61 | <td>{patient.email}</td>
  62 | <td>{patient.mobile}</td>
  63 | <td>{patient.gender}</td>             
> 64 | <td>{calculate_age(new Date(patient.dob.getFullYear(), patient.dob.getMonth(), patient.dob.getDate()))}</td>
     | ^  65 | <td>{patient.address}</td>
  66 | {/* <td><EditTodo todo={todo}/></td> */}
  67 | <td><button className="btn btn-danger" >Add Treatment</button></td>

完整代码如下：

import React, { Fragment, useEffect, useState } from "react";


const Listpt = () => {
  const [patients, setPatients] = useState([]);


  const getPts = async() =>{
    try {

       const response = await fetch("http://localhost:5000/patients")
       const jsonData = await response.json();


       setPatients(jsonData);

    } catch (err) {
        console.error(err.message);

    }
}
useEffect(() => {
    getPts();
},[]);


console.log(patients);

//Age calculator
function calculate_age(dob) { 
    var diff_ms = Date.now() - dob.getTime();
    var age_dt = new Date(diff_ms); 

    return Math.abs(age_dt.getUTCFullYear() - 1970);
}

    return <Fragment>
        {" "}
       <table class="table mt-5 text-center">
    <thead>
      <tr>
        <th>OPD No</th>
        <th>Name</th>
        <th>Email</th>
        <th>Mobile</th>
        <th>Gender</th>
        <th>Dob</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>

     {patients.map(patient =>(
         <tr key ={patient.patient_id}>
             <td>{patient.patient_id}</td>
             <td>{patient.name}</td>
             <td>{patient.email}</td>
             <td>{patient.mobile}</td>
             <td>{patient.gender}</td>             
             <td>{calculate_age(new Date(patient.dob.getFullYear(), patient.dob.getMonth(), patient.dob.getDate()))}</td>
             <td>{patient.address}</td>

             <td><button className="btn btn-danger" >Add Treatment</button></td>
         </tr>
     ))}
    </tbody>
  </table>
    </Fragment> 

};

export default Listpt;

谁能帮我理解我在第 64 行哪里出错了。

<td>{calculate_age(new Date(patient.dob.getFullYear(), patient.dob.getMonth(), patient.dob.getDate()))}</td>

【问题讨论】：

patient.dob 不是 Date 对象的实例。如果是字符串，可以直接使用new Date(patient.dob)
patient.dob 很可能是字符串而不是日期。
看起来 patient.dob 不是一个有效的 Dtate 对象，您可以从中调用 getFullYear。
这不是问题，但是您的代码正在成为fetch API 中的猎物：您需要在调用json 方法之前通过检查response.ok 来检查HTTP 是否成功。在我贫血的小博客上this post 中的详细信息。
添加新日期做到了...谢谢 Anurag...干杯！

标签： javascript reactjs html-table

【解决方案1】：

getFullYear 是在 Date 对象上找到的方法。

patient.dob 不能是 Date 对象，因为 JSON 没有这样的东西。

可能是一个字符串。您需要识别该字符串的格式并将其转换为Date 对象。

【讨论】：