Блог

Я извлекаю данные API (имена категорий) из серверной части (Node.js) к интерфейсу (реагировать). На данный момент моя цель-заполнить выбранный компонент в пользовательском интерфейсе Material. Для извлечения данных API я использую Express и запрос на серверной части; Axios на интерфейсной части. По-видимому, это работает, компонент Select получил правильный список опций, но появилось это предупреждение консоли:

Материал-пользовательский интерфейс: вы указали значение ` вне диапазона » для выбранного компонента. Рассмотрите возможность предоставления значения, соответствующего одному из доступных вариантов или «. Доступные значения animal :, career , celebrity , dev , explicit , fashion , food , history , money , movie , music , political , religion , science , sport , travel .

Эти ссылочные значения взяты из полученных данных API, но я не знаю, как это исправить. Любая помощь приветствуется. Вот мой код:

 export default function Home() {
  const classes = useStyles();
  const [list, setList] = useState([]);
  const [categoryName, setCategoryName] = useState([]);

  useEffect(() => {
    axios
      .get("/getCategories")
      .then((response) => {
        setList(response.data.categories);        
      })
      .catch((e) => {
        console.log(e.response.data);
      });
  }, []);

  const handleChange = (event) => {
    setCategoryName(event.target.value);    
  };

  return (
    <div className={classes.root}>      
      <FormControl>
        <InputLabel id="category-label">Category</InputLabel>
        <Select         
          labelId="category-label"
          id="category"
          value={categoryName}
          onChange={handleChange}
        >
          {list.map((item) => (
            <MenuItem key={item} value={item}>
              {item}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}
 

добавьте это defaultValue = "" вот так <Select ... defaultValue="" >

Для получения более подробной информации, пожалуйста, обратитесь к этому github

все хорошо, но тебе просто нужно кое-что изменить, прежде чем

 const [categoryName, setCategoryName] = useState([]);
 

после

  const [categoryName, setCategoryName] = useState('');
 

не используйте значение по умолчанию CategoryName в качестве массива или имени(из-за эффекта использования, выполняемого после рендеринга. поэтому первое время значение не задано после useEffect звонок своего значения, установленного в вашей категории список и проверить, если значение существует в списке категория в противном случае он будет генерировать предупреждение) предупреждение означает, что вы добавляете значение(значение={категория}) в SELECT, которые не в вашем списке наилучшим образом, используя значение по умолчанию вариант, но в любом случае вы просто установите категория значения как пустые и вам просто узнать о useEffect и как это работает
https://stackblitz.com/edit/react-hmdhsf?file=src/home.js

Вы должны инициализировать categoryName как пустую строку вместо Array