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

问题描述

我正在使用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() ..，则效果很好

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）