reactstrap：DropdownItem 不在数组的 map 方法中呈现

Question

问题：DropdownItem 中的数据未呈现，但所有控制台日志都有效。

同样的问题也存在于 table 列中。

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

这是我的完整代码

以下是相关片段。

不确定，我哪里错了。

下拉列表

<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>

table 列

  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,
    },
  ];

table 的最后一列有一个饼图，下面的代码就是为了这个。

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} />;
  }

Answer 1

根据 docs：

，实际上您正在使用 react-table 的 version 6

$ 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 的访问器，您需要更改它们以确保它们使用数组第一个索引的值：

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

这适用于所有 header 项。

Answer 2

首先你需要把DropDownMenu放在地图函数外面

其次你需要以某种方式展平你的数组

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

然后

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

这应该有效。

reactstrap：DropdownItem 不在数组的 map 方法中呈现

reactstrap: DropdownItem not rendering inside map method of array

javascript

interpolation

reactjs

array.prototype.map

react-table-v6