根据React表中主要组件的过滤器值更新子组件数据表

Question

我是React的新手。我有一个带有子组件的反应表。我想根据主组件的过滤值在子组件中显示更新的数据。也就是说，可以将用于过滤主组件的值传递给子组件，并进一步默认过滤子组件数据并显示该数据。下面是我的Reacttable代码片段和当前表格的屏幕截图。

        <div>
      <ReactTable
        data={cloudBilling["detailedCost"]}
        filterable
        defaultFilterMethod={(filter, row) =>
          String(row[filter.id]) === filter.value}
        columns={[
          {
            columns: [
              {
                Header: "Username",
                id: "tagValue",
                accessor: d => d.tagValue,
                filterMethod: (filter, rows) =>
                  matchSorter(rows, filter.value, { keys: ["tagValue"] }),
                filterAll: true
              }
            ]
          }
        ]}
        defaultPageSize={10}
        className="-striped -highlight"
        SubComponent={row => {
          return (
            <div>
              <ReactTable
                data={cloudBilling["detailedCost"]}
                filterable
                defaultFilterMethod={(filter, row) =>
                  String(row[filter.id]) === filter.value}
                columns={[
                  {
                    Header: "cost",
                    columns: [
                      {
                        Header: "cost",
                        id: "cost",
                        accessor: d => d.cost,
                        filterMethod: (filter, rows) =>
                          matchSorter(rows, filter.value, { keys: ["cost"] }),
                        filterAll: true
                      },
                      {
                        Header: "costType",
                        id: "costType",
                        accessor: d => d.costType,
                        filterMethod: (filter, rows) =>
                          matchSorter(rows, filter.value, { keys: ["costType"] }),
                        filterAll: true
                      }
                    ]
                  },
                  {
                    Header: "Tag",
                    columns: [
                      {
                        Header: "tagKey",
                        id: "tagKey",
                        accessor: d => d.tagKey,
                        filterMethod: (filter, rows) =>
                          matchSorter(rows, filter.value, { keys: ["tagKey"] }),
                        filterAll: true
                      },
                      {
                        Header: "tagValue",
                        id: "tagValue",
                        accessor: d => d.tagValue,
                        filterMethod: (filter, rows) =>
                          matchSorter(rows, filter.value, { keys: ["tagValue"] }),
                        filterAll: true
                      }
                    ]
                  },
                  {
                    Header: "Date",
                    columns: [
                      {
                        Header: "startDate",
                        id: "startDate",
                        accessor: d => d.startDate,
                        filterMethod: (filter, rows) =>
                          matchSorter(rows, filter.value, { keys: ["startDate"] }),
                        filterAll: true
                      },
                      {
                        Header: "endDate",
                        id: "endDate",
                        accessor: d => d.endDate,
                        filterMethod: (filter, rows) =>
                          matchSorter(rows, filter.value, { keys: ["endDate"] }),
                        filterAll: true
                      }
                    ]
                  }
                ]}
                defaultPageSize={10}
                className="-striped -highlight"
              />
              <br />
            </div>
          );
        }}
      />
      <br />
    </div>

截屏： Main table before filtering

Main table after searching for a particular user Currently the subcomponent or sub table shows all the data but I want it to display only user anharder's rows