Как вставить значение в элемент из другого массива?

Question

[Александр]

Есть такой код, в нем мап который вставляет сами проекты (jsx)

Код

<Table striped bordered hover className='m-3'>
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Start Date</th>
                <th>Cancel Date</th>
                <th>Remain time</th>
                <th>Description</th>
            </tr>
            </thead>
            <tbody>
            {tasks && tasks.map((task) =>
                    <tr style={{cursor: "pointer"}} key={task.id} onClick={e => console.log(task)}>
                        <td>{task.id}</td>
                        <td>{task.taskName}</td>
                        <td>{task.startDate && new Date(Date.parse(task.startDate)).toLocaleString()}</td>
                        <td>{task.cancelDate && new Date(Date.parse(task.cancelDate)).toLocaleString()}</td>
                        <td>{tasks.remainTime} (Здесь надо получить сразу с эндпоинта по task.id)</td>
                        <td>{task.description} (Сюда надо вставить description из другого массива)</td>
                    </tr>
            )}
            </tbody>
        </Table>

Так это все выглядит
Пытаюсь вставить Description из другого массивов (приходит с другого эндпоинта)
Пытался сделать через find() добавлять элемент в мапе (не понимаю как это работает в js) не получается, искал по task.id и по совпадению пытался получить timeRemain этого элемента в массиве.
Так же надо Remain time вставить который получается по taskId
Не понимаю совсем как это сделать, может кто сказать куда смотреть?

Answer 1

[OLSER333]

Здесь два варианта.
1. Изначально правильно сформировать данные, а потом отрисовать через map, это дольше, т.к. неск-ко запросов, но проще вывести одним .map().
2. Отрисовать начальные данные, а description и remainTime отрисуются позже, как придут (чтобы не было ошибки по обращению к null нужно использовать условную отрисовку)

Второй вариант - сначала получаем одни данные, а потом позже придут другие. Благодаря {description && отрсиуются позже без ошибки. Чтобы отрисовывать из разных данных, использую idx (если данные в обоих массивах идут в одинаковом порядке)

Пример

import React, { useState, useEffect } from 'react'

const Deletee = () => {
  const [tasks, setList] = useState()
  const [description, setAnoterData] = useState()
  useEffect(() => {
    async function getData() {
      const res2 = await fetch('https://jsonplaceholder.typicode.com/posts/')
      setList(await res2.json())
      setTimeout(async () => {
        const res1 = await fetch('https://jsonplaceholder.typicode.com/todos')
        setAnoterData(await res1.json())
      }, 1000)
    }
    getData()
  }, [])
  return (
    <>
      <ul>
        {tasks &&
          tasks.map((task, idx) => {
            return (
              <li key={task.id} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                <span>{task.title}</span>
                {description && <strong>{description[idx].title + '!!!'}</strong>}
              </li>
            )
          })}
      </ul>
    </>
  )
}

export default Deletee

Comments

[Александр]

Спасибо, звучит ровно как надо. Пойду пробовать.