0

С бэка мне приходит массив объектов в таком виде:

0: {_id: '6149ed683444e100fa6830b5', user: '61487ece544179033653eac5', date: '2021-09-03T00:00:00.000Z', time: '2', __v: 0}
1: {_id: '614ad40b9643c003b3222ef3', user: '61487ece544179033653eac5', date: '2021-09-07T00:00:00.000Z', time: '3', __v: 0}
2: {_id: '614ae776890fa8046b12ead9', user: '61487ece544179033653eac5', date: '2021-09-04T00:00:00.000Z', time: '2', __v: 0}
3: {_id: '614aeb79890fa8046b12eb7b', user: '61487ece544179033653eac5', date: '2021-09-13T00:00:00.000Z', time: '1', __v: 0}
4: {_id: '614aefbe890fa8046b12ec01', user: '61487ece544179033653eac5', date: '2021-09-05T00:00:00.000Z', time: '4', __v: 0}
5: {_id: '614b195fc80ddd0b8b230d8b', user: '61487ece544179033653eac5', date: '2021-09-23T00:00:00.000Z', time: '3', __v: 0}
6: {_id: '614b52ed1b973001155b6380', user: '61487ece544179033653eac5', date: '2021-09-08T00:00:00.000Z', time: '3', __v: 0}
7: {_id: '614b53311b973001155b63a5', user: '61487ece544179033653eac5', date: '2021-09-09T00:00:00.000Z', time: '3', __v: 0}

Я пробегаюсь по этом массиву объектов таким образом с помощью map:

{store.time.map((time, indx) => (

   <>
      {time.time && time.date === dayOfMonth ? (
        <div className="flex items-center edit h-10 bg-custom-orange justify-center text-white rounded-sm">
          <div className="text-2xl">{time.time} ч.</div>
          <div className="ml-3 cursor-pointer hover:opacity-90">
            <svg
              width="15"
              height="15"
              viewBox="0 0 19 19"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M2.375 13.6562V16.625H5.34375L14.0996 7.86916L11.1308 4.90041L2.375 13.6562ZM16.3954 5.57333C16.7042 5.26458 16.7042 4.76583 16.3954 4.45708L14.5429 2.60458C14.2342 2.29583 13.7354 2.29583 13.4267 2.60458L11.9779 4.05333L14.9467 7.02208L16.3954 5.57333Z"
                fill="#fff"
              />
            </svg>
          </div>
        </div>
      ) : (
        <div className="flex">
          <input
            type="text"
            onChange={(e) => onChange(e)}
            className="flex items-center justify-center w-10 h-10 rounded-md mr-2 max-w-10 max-h-10 text-md time-input"
          />

          <div onClick={() => sendTime(user._id)} className="cursor-pointer hover:opacity-90">
            <svg
              width="40"
              height="40"
              viewBox="0 0 60 60"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M53.3333 0H6.66667C2.96667 0 0 3 0 6.66667V53.3333C0 57 2.96667 60 6.66667 60H53.3333C57 60 60 57 60 53.3333V6.66667C60 3 57 0 53.3333 0ZM46.6667 33.3333H33.3333V46.6667H26.6667V33.3333H13.3333V26.6667H26.6667V13.3333H33.3333V26.6667H46.6667V33.3333Z"
                fill="#86C443"
              />
            </svg>
          </div>
        </div>
      )}
    </>
))}

Условие звучит так:

  • если в этом объекте есть время и дата этого объекта совпадает с датой в таблице -> отобрази мне этот элемент заполненным, если нет -> отобрази пустой инпут. Но проблема в том, что сравнивается каждый объект в массиве с каждой датой из таблицы, и на выходе я получаю следующее: введите сюда описание изображения

Ожидаю же я увидеть такой результат: введите сюда описание изображения

Таблица чисел месяца формируется отдельно от таблицы с датами. На сервере это выглядит так:

async generateDate() {
    const value = moment();
    const startDay = value.clone().startOf("month").startOf("week");
    const endDay = value.clone().endOf("month").endOf("week");
    const day = startDay.clone().subtract(-4, "day");
    const calendar = [];

    while (day.isBefore(endDay, "day")) {
      calendar.push(
        Array(1)
          .fill(0)
          .map(() => day.add(1, "day").clone()),
      );
    }

    return calendar;
  }

На клиенте так:

{store.calendar.map((week: any) => (
  <li className="mr-4">
    {week.map((day: any) => (
      <div className="flex">
        <div className="text-2xl w-10 h-10 p-4 flex items-center justify-center">
                {moment(day).format("D").toString()}
         </div>
                      
      </div>
))}
</li>

В голову приходят только костыльные решения с display none. Но мне почему-то кажется есть более правильный способ решить эту проблему. Заранее благодарен за помощь в этом вопросе!

2
  • Я правильно понял, что у тебя есть два массива объектов ? один с сервера, а другой это таблица дат? 25 сен 2021 в 7:09
  • Да, все верно. Таблица дат формируется независимо от ответа с сервера 25 сен 2021 в 7:22

2 ответа 2

1

const data = [
  {
    "_id": "614ed395ae139cd283c04b77",
    "user": "05213607-0456-48af-b611-5758ef62098d",
    "date": "2021-09-26",
    "time": 0
  },
  {
    "_id": "614ed395b026737708dbf328",
    "user": "de9f26a6-ee0a-42d0-8d84-7b93073330fc",
    "date": "2021-09-29",
    "time": 2
  },
  {
    "_id": "614ed395deca8f0b84f63a33",
    "user": "ca5017e3-85e5-412b-a468-59cd0bca960b",
    "date": "2021-09-30",
    "time": 2
  },
  {
    "_id": "614ed395dae3c5efde6f9721",
    "user": "f68459ca-27c6-4f4e-9334-8845f82012a8",
    "date": "2021-09-28",
    "time": 6
  },
  {
    "_id": "614ed3950a0b5db824a537f2",
    "user": "7840b774-e604-4d9b-8f8b-da7ce782ecab",
    "date": "2021-09-26",
    "time": 2
  },
  {
    "_id": "614ed395b4bba2149ec12f78",
    "user": "6a5895d4-2649-4e5f-936f-05e6ec7a0a42",
    "date": "2021-09-30",
    "time": 6
  }
];

const date = [];
// сформируем массив дат
for (let i = 1; i <= 30; i++){
  date.push({
    date: `2021-09-${i}`
  });
}

//объединили два массива по датам.
date.map((value) => {
  const find = data.filter(item => value.date == item.date);
  value.list = find;
});

console.log(date);

Из примера видно, что мы получаем один массив со всеми необходимыми данными, которые объединены по дате. Соответственно, теперь куда легче сделать вывод этой информации. Если у нас в объекте массив list пустой, то отрисовывай плюс (добавление). Если у нас массив list имеет значения, то отрисовываем их.

7
  • Я не совсем понял ваш ответ. Ведь теперь будет также 30 объектов массива проходить и сравнивать себя с конкретной датой в таблице. Или я не прав? 25 сен 2021 в 14:35
  • Вам нужно вывести все даты месяца, если на данную дату у вас есть записи, то выводите их, если на эту дату нету ничего вывести плюсик. так? Если все правильно, то Вам из двух массивов данных нужно прийти к одному, в котором будет вся необходимая информация(как в моем примере). 30 объектов - это один объект = одной дате. Согласно вашей картинки, то вам нужно вывести все даты. 27 сен 2021 в 5:47
  • Проблема в том, что числа в таблице обновляются в зависимости от месяца (ведь не в каждом месяце 30 дней). Сервер и база данных мои. Сейчас в свой вопрос добавлю то, как формируется таблица чисел на сервере и клиенте. 27 сен 2021 в 7:11
  • Не смотрите как я формирую массив дат! это я сделал, чтобы было два массива данных. Вы посмотрит, как у меня в примере, есть два разных массива и я просто к каждому дню добавляю записи относящиеся только к данной дате! 27 сен 2021 в 9:25
  • stackblitz.com/edit/react-f1qkfq?file=src/App.js вот небольшой пример. 27 сен 2021 в 9:58
0

Когда мы проходим map в Reacte мы всегда должны указывать key для элементов. Я не уверен что это до конца решит проблему. Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени:

const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} );

2
  • В текущем виде ваш ответ непонятен. Пожалуйста, нажмите править под сообщением, чтобы добавить больше подробностей, которые помогут другим понять, как он отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в справке. 25 сен 2021 в 7:04
  • Добрый день, спасибо за ответ. Расстановка ключей не решает данной проблемы 25 сен 2021 в 7:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.