Как динамически добавлять данные в таблицу с помощью карты / if или с помощью терминального оператора в JSX - PullRequest
Новая
       16

Как динамически добавлять данные в таблицу с помощью карты / if или с помощью терминального оператора в JSX

0 голосов
/ 03 марта 2020

Я работаю с material-ui/react таблицами, и мне нужно заменить некоторые данные таблицы stati c на некоторые динамические данные c из моего веб-API.

У меня есть данные, но я борюсь с синтаксисом JSX . Я родом из Java мира, поэтому JSX - новинка для меня, и мне трудно с головой разбираться с синтаксисом и требованиями при рендеринге. Ранее я использовал шаблоны на стороне сервера, так что это должно быть легко, но я нахожу это очень сложным.

Я знаю, что JSX не нравится операторы внутри карт. Я видел рекомендации по использованию троичного оператора (?), Но у меня нет сценария if / else, только if. Может ли кто-нибудь помочь мне достичь желаемых результатов и объяснить мне какой-нибудь JSX?

Вот как выглядела эта таблица раньше (кредиты для creative-tim): 

<Table
  tableData={[
    [
      <img src={us_flag} alt="us_flag" key={"flag"} />,
      "USA",
      "2.920",
      "53.23%"
    ],
    ...
    [
      <img src={ro_flag} alt="us_flag" key={"flag"} />,
      "Romania",
      "600",
      "5.94%"
    ],
    [
      <img src={br_flag} alt="us_flag" key={"flag"} />,
      "Brasil",
      "550",
      "4.34%"
    ]
  ]}
/>

А вот то, что я пытаюсь безрезультатно заменить на: 

<Table tableData={
  {evtCounts.map(function (evtCount) {
    {sites.map(function (site) {
      if (site.IDX == evtCount.SiteID) {
        return ([{site.Name}, {evtCount.Percentage}]);
      }
    })}
  })}
}/>

Несмотря на очевидную проблему с форматированием (отсутствует внешний набор квадратных скобок), у меня возникают проблемы с компиляцией. JSX по каким-то причинам не нравятся мои утверждения карты. Он просто продолжает говорить мне: 

        ./src/views/Dashboard/Dashboard.js
      Line 197:31:  Parsing error: Unexpected token, expected ","

      195 |                 <GridItem xs={12} sm={12} md={5}>
      196 |                   <Table tableData={
    > 197 |                     {evtCounts.map(function (evtCount) {
          |                               ^
      198 |                       {sites.map(function (site) {
      199 |                         if (site.IDX == evtCount.SiteID) {
      200 |                           return ([{site.Name}, {evtCount.Percentage}]);

1 Ответ

3 голосов
/ 03 марта 2020

Некоторые пункты уведомления

Ниже приведен небольшой пример для нормальной ситуации 

<Table tableData={
  evtCounts.map(evtCount => 
    sites.map(site =>
      site.IDX === evtCount.SiteID &&
      <>
        <p>{site.Name}</p>
        <p>{evtCount.Percentage}</p>
      </>
    )
  )}
/>
...