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

Question

我正在使用react-tablev7 生成一个表。现在我试图通过写这个来动态地进行页面大小分页

       <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() ..

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>

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