Блог

Я использую 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() ..

Если при первоначальном отображении значение 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 строк или более.