Как получить полные данные ответа на основе ввода в текстовое поле Reactjs - PullRequest
Новая
       4

Как получить полные данные ответа на основе ввода в текстовое поле Reactjs

0 голосов
/ 23 апреля 2020

Я столкнулся с проблемой получения значений из отображаемых данных в компоненте, который уже выводится при отображении страницы. Что мне нужно сделать, так это то, что когда кто-то вводит данные в текстовое поле, он должен отправлять их в базу данных, но извлекает данные этих полей из данных времени выполнения.

В настоящее время, когда я что-то печатаю, он говорит неопределенное поле et c. Это не данные формы, а данные, которые необходимо обновить из текстового поля. Поэтому, если пользователь записывает какой-то xyz в текстовое поле, нам нужно обновить эти данные в соответствии с идентификатором, связанным с этим полем.

Я не могу получить данные в: console.log (Id, projectId, userId , date, e.target.value) Я использовал метод Reduce, который служит цели, но теперь у меня есть другой вариант использования.

Я не хочу устанавливать скрытые поля, так как это не правильный подход.

Проблема заключается в том, что когда кто-то вводит данные в текстовое поле, мне нужно получить из него данные этого текстового поля и связанный с ним идентификатор и соответствующие данные и передать его по телефону ajax.

I нужно отправить эти данные с ajax, но как только я что-то наберу, появится сообщение undefined. Я могу легко получить данные из массива проектов, но это бесполезно для меня. Я думаю, что метод уменьшения массива не подходит для моего варианта использования.

Вот массив проектов: 

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

1 Ответ

1 голос
/ 23 апреля 2020

Этот вызов find может иногда возвращать undefined. 

const found = h.project_times.find(item => number == item["date"]
  .split('-')[2]
  .replace(/^0+/, '')
)

Это ожидается, когда совпадений не найдено. И поскольку он не определен, все они также в конечном итоге будут undefined: 

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"];

Поэтому, весьма обычно, что ваш оператор console.log выведет значение undefined.

Похоже, вам нужно сделать несколько вещей:

  1. Сохранить эти данные как состояние в вашем компоненте.
  2. Добавить функцию для ее изменения state.
  3. Добавление функции для хранения состояния (вызов API)

У меня недостаточно контекста, чтобы ответить на вопрос №3 за вас, но вот тип шаблона, который вы хотите go для: 

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)
      })}/>
  // ...
}

Внутри вашей функции updateHours вы создадите новую копию ваших данных с ожидаемыми изменениями. Например, если вы обновляете существующий объект, вы обновите его свойство hours. Если вы обновляете что-то, для чего нет записи, вы создадите новое, et c. Ключом является ваш вызов setState для обновления данных в вашем компоненте.

Затем, когда у вас есть кнопка отправки или любой другой метод, который вы хотите сохранить, вы будете ссылаться на это состояние для самой последней копия ваших данных.

Это общий шаблон для любого вида компонента ввода формы; это упражнение в обновлении состояния.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...