Попытка вызвать значение ячейки из функции в таблице реакции v7 - PullRequest
Новая
       40

Попытка вызвать значение ячейки из функции в таблице реакции v7

0 голосов
/ 12 июля 2020

Я создаю таблицу с помощью библиотеки react-table. Моя идея состоит в том, чтобы соединить два разных API таким образом, чтобы одно из значений ячейки было из API2, которое связано с API1 на основе значения идентификатора.

вот пример значений из API.

  1. http://localhost: 8000 / кластеры? Format = json

    {"count": 16, "next": null, "previous": null, "results" : [{"cluster_id": 4, "module": {"id": 1, "name": "linkedin", "description": "Коллекция Linkedin для человеческих ресурсов"}, "schedules": ["{'id ': 7,' name ':' mandard_1 '} "] ....

  2. http://localhost/cluster/ / run

    {"count": 1, "next": null, "previous": null, "results": [{"id": 5, "scraping_time": "2020-05-25T18: 43: 38.309015Z "," start_date ":" 2020-05-25T18: 45: 45.912419Z "," end_date ": null," duration ": null ......

Два набора данных выше связаны между собой. Моя идея состоит в том, что одна из ячеек таблицы будет содержать значение из данных 2 выше, относящееся к данным 1 в той же строке.

Я хотел сделать это, используя функцию для вызова второго api и извлечения значение, добавляемое к строке. Я приложил некоторые усилия, но думаю, что делаю это неправильно. Некоторая помощь будет принята с благодарностью.

вот часть моего текущего кода ниже, я добавил несколько дополнительных комментариев, чтобы вы могли лучше понять, чего я пытаюсь достичь: 

import TableContainer from './table';
import { SelectColumnFilter } from './filters';

 //get data from the first api
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.get('http://localhost:8000/clusters?format=json');
        setdata(res.data['results']);
      } catch (e) {
        console.log(e)
      }
    }
    fetchData();
  }, []);

  console.log(data)
  

//columns and data accessors of the table
  const columns = useMemo(
    () => [
      {
        Header: 'Task Name',
        accessor: 'name',
        disableSortBy: true,
        Filter: SelectColumnFilter,
        filter: 'equals',
      },
      {
        Header: 'Square',
        accessor: 'module.name'
      },
      {
        Header: 'Schedule',
        accessor: 'schedules'
      },
      {
        Header: 'Runs',
        accessor : 'cluster_id'
        Cell : (e) => {
          let url = `http://localhost/cluster/${e.value}/runs`
      console.log('url', url)
      axios.get(url).then(res => { return res.data['count']})},  
      //call function to append needed the value
        disableSortBy: true,
        Filter: SelectColumnFilter,
        filter: 'equals',
      }
    ],
    []
  );



  return (
    <div>
      <TableContainer columns={columns} data={data} />
    </div>
  )
}

export default App;

Спасибо!

...