动态页面分页在反应表中不起作用答案

【问题标题】：Dynamic page pagination is not working in react table动态页面分页在反应表中不起作用
【发布时间】：2020-10-13 08:33:58
【问题描述】：

我正在使用react-table v7 来生成表格。现在我正在尝试通过编写这个来动态地进行页面大小分页

       <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value));
              }}
            >
              {page.length > 10 ? (
                <MenuItem id={10} value={10} key={10}>
                  Show 10
                </MenuItem>
              ) : (
                [10, 20].map((pageSize) => (
                  <MenuItem value={pageSize} key={pageSize}>
                    Show {pageSize}
                  </MenuItem>
                ))
              )}
        </Select>

如果页面（行）长度超过 10，则显示两个选项 Show 10 和 Show 20，但是当我选择 Show 20 时，下拉值不再显示值

我在控制台 Material-UI: You have provided an out-of-range value '20' for the select component. Consider providing a value that matches one of the available options or ''. The available values are '10'. 中收到警告

如果我删除{page.length > 10 ? .. 中的三元运算符并只输入[10,20,30].map() ..，它会正常工作

【问题讨论】：

标签： reactjs react-table react-table-v7

【解决方案1】：

如果对于初始渲染，page.length 的值超过 10，则下拉列表将仅显示 Show 10，因为这是您的逻辑状态。如果这确实是您想要的并且您的问题是未显示的值，则可以通过将 MenuItem 更改为 option 来工作，同时 select 和 option 均未大写（在 react-table 7.7.0 中）：

<select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={pageSize}
      onChange={(e) => {
        setPageSize(Number(e.target.value));
      }}
    >
      {page.length > 10 ? (
        <option id={10} value={10} key={10}>
          Show 10
        </option>
      ) : (
        [10, 20].map((pageSize) => (
          <option value={pageSize} key={pageSize}>
            Show {pageSize}
          </option>
        ))
      )}
</select>

另一方面，如果您想要在少于 10 行时提供仅显示 Show 10 选项的选项，则在三元运算符检查中将 > 更改为 <。这样，如果行数少于 10 行，您将（动态地）提供仅显示 Show 10 的选项，或者当行数或多于 10 行时同时显示 Show 10 和 Show 20 选项。

【讨论】：