Javascript 如何基于文本字段输入获取完整的响应数据

我在从已在页面渲染中输出的组件中的渲染数据获取值时遇到问题。我需要做的是，当有人在文本字段中键入数据时，它应该将其发送到数据库，但从运行时数据中获取该字段的数据

当前，当我键入某个内容时，它会显示未定义字段等。 这不是表单数据，而是需要从文本字段更新的数据。 所以，如果用户在文本字段中写入某些xyz，我们需要根据与该字段关联的id更新该数据

我无法将数据放入：console.log（Id、projectId、userId、date、e.target.value） 我使用了reduce方法来达到这个目的，但现在我有了另一个用例

我不想设置隐藏字段，因为这不是正确的方法

问题是，当有人在文本字段中键入数据时，我需要从中获取该文本字段数据和相关id以及相应的数据，并将其传递给ajax调用

我需要用ajax发送数据，但一旦我输入了什么，它就会显示undefined。我可以很容易地从projects数组中获取数据，但它对我没有用处。我认为数组缩减方法不适合我的用例

以下是项目阵列：

data = [
  {
    "id": 27,
    "projectno": "007823",
    "projectname": "non-A Project 2",
    "dailyproof": 1,
    "probability": "1.0",
    "toleranceregistering": 2,
    "customer_name": "Peter",
    "user_id": "4",
    "days_allocated": "231.0",
    "days_real": "5.0",
    "hours_real": "6.0",
    "project_times": [
      {
        "id": 11,
        "activity": "\"yht\"",
        "date": "2020-04-28",
        "hours": "2.0",
        "project_id": 27,
        "token": "\"trr\"",
        "user_id": 4,
        "created_at": "2020-04-22T12:36:55.479Z",
        "updated_at": "2020-04-22T12:36:55.479Z"
      },
      {
        "id": 12,
        "activity": "\"yht\"",
        "date": "2020-04-03",
        "hours": "2.0",
        "project_id": 27,
        "token": "\"trr\"",
        "user_id": 4,
        "created_at": "2020-04-22T12:37:08.763Z",
        "updated_at": "2020-04-22T12:37:08.763Z"
      },
      {
        "id": 13,
        "activity": "\"yht\"",
        "date": "2020-04-14",
        "hours": "2.0",
        "project_id": 27,
        "token": "\"dfg\"",
        "user_id": 4,
        "created_at": "2020-04-22T12:37:19.177Z",
        "updated_at": "2020-04-22T12:37:19.177Z"
      }
    ]
  },
  {
    "id": 28,
    "projectno": "007333",
    "projectname": "non-A Project 2",
    "dailyproof": 0,
    "probability": "1.0",
    "toleranceregistering": 2,
    "customer_name": "Peter",
    "user_id": "4",
    "days_allocated": "231.0",
    "days_real": "3.333333333333333333333333334",
    "hours_real": "4.0",
    "project_times": [
      {
        "id": 18,
        "activity": "\"tgr\"",
        "date": "2020-04-16",
        "hours": "2.0",
        "project_id": 28,
        "token": "\"ujy\"",
        "user_id": 4,
        "created_at": "2020-04-22T12:39:41.465Z",
        "updated_at": "2020-04-22T12:39:41.465Z"
      },
      {
        "id": 19,
        "activity": "\"ddd\"",
        "date": "2020-04-11",
        "hours": "2.0",
        "project_id": 28,
        "token": "\"fff\"",
        "user_id": 4,
        "created_at": "2020-04-22T12:39:55.020Z",
        "updated_at": "2020-04-22T12:39:55.020Z"
      }
    ]
  },
  {
    "id": 29,
    "projectno": "00721",
    "projectname": "non-A Project 2",
    "dailyproof": 1,
    "probability": "1.0",
    "toleranceregistering": 2,
    "customer_name": "Peter",
    "user_id": "4",
    "days_allocated": "231.0",
    "days_real": "5.0",
    "hours_real": "6.0",
    "project_times": [
      {
        "id": 22,
        "activity": "\"cdf\"",
        "date": "2020-04-11",
        "hours": "2.0",
        "project_id": 29,
        "token": "\"fgff\"",
        "user_id": 4,
        "created_at": "2020-04-22T12:41:26.392Z",
        "updated_at": "2020-04-22T12:41:26.392Z"
      },
      {
        "id": 23,
        "activity": "\"tg\"",
        "date": "2020-04-15",
        "hours": "2.0",
        "project_id": 29,
        "token": "\"ad\"",
        "user_id": 4,
        "created_at": "2020-04-22T12:41:38.747Z",
        "updated_at": "2020-04-22T12:41:38.747Z"
      },
      {
        "id": 24,
        "activity": "\"ff\"",
        "date": "2020-04-19",
        "hours": "2.0",
        "project_id": 29,
        "token": "\"bbb\"",
        "user_id": 4,
        "created_at": "2020-04-22T12:41:47.500Z",
        "updated_at": "2020-04-22T12:41:47.500Z"
      }
    ]
  },
  {
    "id": 30,
    "projectno": "0074",
    "projectname": "non-A Project 2",
    "dailyproof": 1,
    "probability": "1.0",
    "toleranceregistering": 2,
    "customer_name": "Peter",
    "user_id": "4",
    "days_allocated": "231.0",
    "days_real": "3.333333333333333333333333334",
    "hours_real": "4.0",
    "project_times": [
      {
        "id": 25,
        "activity": "\"ff\"",
        "date": "2020-04-12",
        "hours": "2.0",
        "project_id": 30,
        "token": "\"bbb\"",
        "user_id": 4,
        "created_at": "2020-04-22T12:42:09.385Z",
        "updated_at": "2020-04-22T12:42:09.385Z"
      },
      {
        "id": 26,
        "activity": "\"rter\"",
        "date": "2020-04-19",
        "hours": "2.0",
        "project_id": 30,
        "token": "\"gfdg\"",
        "user_id": 4,
        "created_at": "2020-04-22T12:42:19.861Z",
        "updated_at": "2020-04-22T12:42:19.861Z"
      }
    ]
  }
]

getDaysNumber('2020', '04') {
        const dayNums = [];
        const daysInMonth = new Date(year, month, 0).getDate();
        for (let i = 1; i <= daysInMonth; i++) {
            dayNums.push(i);
            // console.log(i, ' xxx ');
        }
        return dayNums;
    }

{


data.map((h, index) => (
                                    <TableRow key={`mi-${index}`}>
                                        <TableCell align="right">{h.projectno}</TableCell>
                                        <TableCell align="right">{h.projectname}</TableCell>
                                        <TableCell align="right">{h.customer_name}</TableCell>
                                        <TableCell align="right">{h.days_allocated}</TableCell>
                                        <TableCell align="right">{h.days_real}</TableCell>
                                        <TableCell align="right">{h.hours_real}</TableCell>
                                        {daysNumber.reduce((acc, number, index) => {
                                            const found = h.project_times.find(item => number == item["date"].split('-')[2].replace(/^0+/, ''))
                                            const Id = found && found["id"];
                                            const projectId = found && found["project_id"];
                                            const userId = found && found["user_id"];
                                            const date = found && found["date"];
                                            const hours = found && found["hours"];
                                            found && console.log(Id, projectId, userId, date);
                                            return [...acc,
                                                h.dailyproof == 1 && hours > 0.0 ?
                                                    <TableCell align="right" key={`mi-${index}`}
                                                               onClick={this.launchCreateContactDialog}>{hours}</TableCell>
                                                    :
                                                    <TableCell align="right" key={`mi-${index}`}>
                                                        <TextField required fullWidth size="small"
                                                                   variant="outlined"
                                                                   onKeyUp={(e) => console.log(Id, projectId, userId, date, e.target.value)}/>
                                                    </TableCell>
                                            ]
                                        }, [])
                                        }
                                    </TableRow>
                                ))
                            }

数据=[
{
“id”：27，
“项目编号”：“007823”，
“项目名称”：“非A项目2”，
“日常证明”：1，
“概率”：“1.0”，
“公差登记”：2，
“客户名称”：“彼得”，
“用户id”：“4”，
“分配天数”：“231.0”，
“days_real”：“5.0”，
“真实小时数”：“6.0”，
“项目时间”：[
{
“id”：11，
“活动”：“yht”，
“日期”：“2020-04-28”，
“小时数”：“2.0”，
“项目id”：27，
“令牌”：“trr\”，
“用户id”：4，
“创建时间”：“2020-04-22T12:36:55.479Z”，
更新地址：“2020-04-22T12:36:55.479Z”
},
{
“id”：12，
“活动”：“yht”，
“日期”：“2020-04-03”，
“小时数”：“2.0”，
“项目id”：27，
“令牌”：“trr\”，
“用户id”：4，
“创建时间”：“2020-04-22T12:37:08.763Z”，
更新地址：“2020-04-22T12:37:08.763Z”
},
{
“id”：13，
“活动”：“yht”，
“日期”：“2020-04-14”，
“小时数”：“2.0”，
“项目id”：27，
“令牌”：“dfg\”，
“用户id”：4，
“创建时间”：“2020-04-22T12:37:19.177Z”，
更新地址：“2020-04-22T12:37:19.177Z”
}
]
},
{
“id”：28，
“项目编号”：“007333”，
“项目名称”：“非A项目2”，
“dailyproof”：0，
“概率”：“1.0”，
“公差登记”：2，
“客户名称”：“彼得”，
“用户id”：“4”，
“分配天数”：“231.0”，
“真实的日子”：“3.33333333 4”，
“实时小时数”：“4.0”，
“项目时间”：[
{
“id”：18，
“活动”：“tgr”，
“日期”：“2020-04-16”，
“小时数”：“2.0”，
“项目id”：28，
“令牌”：“ujy\”，
“用户id”：4，
“创建时间”：“2020-04-22T12:39:41.465Z”，
更新地址：“2020-04-22T12:39:41.465Z”
},
{
“id”：19，
“活动”：“ddd”，
“日期”：“2020-04-11”，
“小时数”：“2.0”，
“项目id”：28，
“令牌”：“fff\”，
“用户id”：4，
“创建时间”：“2020-04-22T12:39:55.020Z”，
更新地址：“2020-04-22T12:39:55.020Z”
}
]
},
{
“id”：29，
“项目编号”：“00721”，
“项目名称”：“非A项目2”，
“日常证明”：1，
“概率”：“1.0”，
“公差登记”：2，
“客户名称”：“彼得”，
“用户id”：“4”，
“分配天数”：“231.0”，
“days_real”：“5.0”，
“真实小时数”：“6.0”，
“项目时间”：[
{
“id”：22，
“活动”：“cdf”，
“日期”：“2020-04-11”，
“小时数”：“2.0”，
“项目id”：29，
“令牌”：“fgff\”，
“用户id”：4，
“创建时间”：“2020-04-22T12:41:26.392Z”，
更新地址：“2020-04-22T12:41:26.392Z”
},
{
“id”：23，
“活动”：“tg\”，
“日期”：“2020-04-15”，
“小时数”：“2.0”，
“项目id”：29，
“令牌”：“ad\”，
“用户id”：4，
“创建时间”：“2020-04-22T12:41:38.747Z”，
更新地址：“2020-04-22T12:41:38.747Z”
},
{
“id”：24，
“活动”：“ff\”，
“日期”：“2020-04-19”，
“小时数”：“2.0”，
“项目id”：29，
“令牌”：“bbb\”，
“用户id”：4，
“创建时间”：“2020-04-22T12:41:47.500Z”，
更新地址：“2020-04-22T12:41:47.500Z”
}
]
},
{
“id”：30，
“项目编号”：“0074”，
“项目名称”：“非A项目2”，
“日常证明”：1，
“概率”：“1.0”，
“公差登记”：2，
“客户名称”：“彼得”，
“用户id”：“4”，
“分配天数”：“231.0”，
“真实的日子”：“3.33333333 4”，
“实时小时数”：“4.0”，
“项目时间”：[
{
“id”：25，
“活动”：“ff\”，
“日期”：“2020-04-12”，
“小时数”：“2.0”，
“项目id”：30，
“令牌”：“bbb\”，
“用户id”：4，
“创建时间”：“2020-04-22T12:42:09.385Z”，
更新地址：“2020-04-22T12:42:09.385Z”
},
{
“id”：26，
“活动”：“rter\”，
“日期”：“2020-04-19”，
“小时数”：“2.0”，
“项目id”：30，
“令牌”：“gfdg\”，
“用户id”：4，
“创建时间”：“2020-04-22T12:42:19.861Z”，
更新地址：“2020-04-22T12:42:19.861Z”
}
]
}
]
getDaysNumber（'2020'，'04'）{
常数dayNums=[]；
const daysInMonth=新日期（年、月、0）.getDate（）；
for（设i=1；i(
{h.projectno}
{h.projectname}
{h.customer_name}
{h.已分配天数}
const found = h.project_times.find(item => number == item["date"]
  .split('-')[2]
  .replace(/^0+/, '')
)

const Id = found && found["id"];
const projectId = found && found["project_id"];
const userId = found && found["user_id"];
const date = found && found["date"];
const hours = found && found["hours"];

import { useEffect, useState } from 'react';

function HoursEntry() {
  const [state, setState] = useState();

  useEffect(() => {
    // Do your data fetching here; for now will use your constant
    setState(data);
  }, []);

  function updateHours({ userId, projectId, hourEntryId, date, hours }) {
    // Build newData based on the changes...
    setState(newData);
  }

  // All the rendering stuff. Rendered components should be mappings of what's in
  // state...
    <TextField 
      required fullWidth
      size="small"
      variant="outlined"
      value={hours}
      onChange={(e) => updateHours({ 
        userId, 
        projectId, 
        hourEntryId: Id, 
        date, 
        hours: parseFloat(e.target.value)
      })}/>
  // ...
}