0

ISSUE：内部数据DropdownItem未呈现，但所有控制台日志均有效。

在表格列中也存在同样的问题。

PS：我强烈认为这是关于插值和一般反应，而不是反应表

这是我的完整代码编辑 black-frost-j9zuv

以下是相关的片段。

不确定，我哪里出错了。

落下

<Dropdown isOpen={dropdownOpen} toggle={this.toggleDropdown}>
                    <DropdownToggle caret>Ships</DropdownToggle>
                    {measurementsData.map((measurementData) => {
                      console.log(" md:", measurementData);
                      console.log(" md.sites:", measurementData.sites);
                      console.log(
                        " md.sites[0].uuid:",
                        measurementData.sites[0].uuid
                      );
                      console.log(
                        " md.sites[0].siteName:",
                        measurementData.sites[0].siteName
                      );
                      {
                        measurementData.sites.map((site) => {
                          console.log(" site.siteName:", site.siteName);
                          return (
                            <DropdownMenu key={site.uuid}>
                              <DropdownItem>
                                {site.siteName}
                                <DropdownItem divider />
                              </DropdownItem>
                            </DropdownMenu>
                          );
                        });
                      }
                    })}
                  </Dropdown>

表格列

  columns = [
    // * embedding checkbox
    {
      Header: "Select",
      Cell: (row) => (
        <input
          type="checkbox"
          defaultChecked={this.state.checked[row.index]}
          checked={this.state.checked[row.index]}
        />
      ),
    },
    {
      Header: "System",
      accessor: "sites.systems.systemName",
    },
    {
      Header: "Measurement",
      accessor: "sites.systems.measurements.name",
    },
    {
      Header: "Min",
      accessor: "sites.systems.measurements.min",
    },
    {
      Header: "Max",
      accessor: "sites.systems.measurements.max",
    },
    {
      Header: "Avg",
      accessor: "sites.systems.measurements.average",
    },
    {
      Header: "Last",
      accessor: "sites.systems.measurements.last",
    },
    {
      Header: "Bar",
      accessor: "sites.systems.measurements.buckets.values",
      Cell: this.MyCell,
    },
  ];

表格的最后一列有一个饼图，下面的代码就是为此。

MyCell({
    value,
    columnProps: {
      rest: { someFunc },
    },
  }) {
    const data = {
      labels: value.map((val, idx) => {
        return idx;
      }),
      datasets: [
        {
          backgroundColor: [
            "#ff8779",
            "#2a84e9",
            "#e2e2e2",
            "#ff8779",
            "#2a84e9",
            "#e2e2e2",
          ],
          data: value,
        },
      ],
    };

    return <Pie data={data} />;
  }
4

2 回答 2

1

实际上，根据文档version 6，您正在使用of ：react-table

$ yarn add react-table-v6

# or NPM

$ npm install react-table-v6

然后你必须导入以下项目：

import ReactTable from 'react-table-v6'
import 'react-table-v6/react-table.css'

对于 react-table 标头的访问器，您需要更改它们以确保它们使用数组的第一个索引的值：

{
  Header: "System",
  accessor: "sites[0].systems[0].systemName" // note that these are arrays not objects 
},

这适用于所有标题项目。

于 2020-07-08T08:34:16.553 回答
1

首先你需要把DropDownMenu地图功能放在外面

其次，您需要以某种方式展平您的阵列

var merged = measurementsData.map(md => md.sites);
merged = [].concat(...merged);

进而

              <DropdownMenu>
                {merged.map(site => {
                  return (
                    <DropdownItem key={site.siteName}>
                      {site.siteName}
                    </DropdownItem>
                  );
                })}
              </DropdownMenu>

这应该有效。

于 2020-07-08T09:39:54.663 回答