Блог

Ниже приведен мой компонент выбора. Я извлекаю некоторые данные и useEffect настраиваю categoryId . Но проблема в том, что он показывает заполнитель в фоновом режиме, как показано ниже.

 import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import { categories } from "./categories";

export default function SimpleSelect() {
  const [categoryId, setCategoryId] = React.useState<number | null>(null);
  const subCategoryOptions = categories[2].children;

  useEffect(() => {
    setCategoryId(7);
  }, []);

  return (
    <div>
      <FormControl fullWidth>
        <InputLabel id="sub-category">Category</InputLabel>
        <Select
          labelId="sub-category"
          onChange={(e) => {
            setCategoryId(e.target.value as number);
          }}
          value={categoryId}
        >
          {subCategoryOptions.map((category) => {
            return (
              <MenuItem value={category.id} key={category.id}>
                {category.name}
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
    </div>
  );
}
  

codesandbox

В консоли для вашей изолированной среды я вижу следующие предупреждения / ошибки:

 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
    in input (created by ForwardRef(SelectInput))
    in ForwardRef(SelectInput) (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(Input))
    in ForwardRef(Input) (created by WithStyles(ForwardRef(Input)))
    in WithStyles(ForwardRef(Input)) (created by ForwardRef(Select))
    in ForwardRef(Select) (created by WithStyles(ForwardRef(Select)))
    in WithStyles(ForwardRef(Select)) (at demo.tsx:20)
    in div (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (at demo.tsx:18)
    in div (at demo.tsx:17)
    in SimpleSelect (at index.tsx:6)
Material-UI: You have provided an out-of-range value `null` for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are `7`, `8`, `9`, `10`, `11`, `12`. 
    in SelectInput (created by InputBase)
    in InputBase (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by Input)
    in Input (created by WithStyles(ForwardRef(Input)))
    in WithStyles(ForwardRef(Input)) (created by Select)
    in Select (created by WithStyles(ForwardRef(Select)))
    in WithStyles(ForwardRef(Select)) (at demo.tsx:20)
    in SimpleSelect (at index.tsx:6) 
Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/docs/forms.html#controlled-components
    in input (created by ForwardRef(SelectInput))
    in ForwardRef(SelectInput) (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(Input))
    in ForwardRef(Input) (created by WithStyles(ForwardRef(Input)))
    in WithStyles(ForwardRef(Input)) (created by ForwardRef(Select))
    in ForwardRef(Select) (created by WithStyles(ForwardRef(Select)))
    in WithStyles(ForwardRef(Select)) (at demo.tsx:20)
    in div (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (at demo.tsx:18)
    in div (at demo.tsx:17)
    in SimpleSelect (at index.tsx:6)
  

Если вы устраните проблемы, null заменив их пустой строкой, все будет работать нормально:

 import React, { useEffect } from "react";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import { categories } from "./categories";

export default function SimpleSelect() {
  const [categoryId, setCategoryId] = React.useState<number | "">("");
  const subCategoryOptions = categories[2].children;

  useEffect(() => {
    setCategoryId(7);
  }, []);

  return (
    <div>
      <FormControl fullWidth>
        <InputLabel id="sub-category">Category</InputLabel>
        <Select
          labelId="sub-category"
          onChange={(e) => {
            setCategoryId(e.target.value as number);
          }}
          value={categoryId}
        >
          {subCategoryOptions.map((category) => {
            return (
              <MenuItem value={category.id} key={category.id}>
                {category.name}
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
    </div>
  );
}