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

Question

我正在使用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'.收到警告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'. 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 ? ..删除三元运算符，它工作正常{page.length > 10 ? .. {page.length > 10 ? ..然后把[10,20,30].map() ..

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