Выпадающий / Выберите значение не меняется - useState

Question

В моем раскрывающемся меню (Выбор пользовательского интерфейса материала) написано «Поиск по», а затем мы нажимаем на него, и отображается список. Когда я выбираю одну из опций, я хочу сохранить опцию и изменить «Поиск по» на выбранную опцию.

export default function UserSearchPage(){
  const [criteria, setCriteria] = useState('');
  const [searchItem, setSearchItem] = useState('');
  return (
    <div>
      <div className='main-content'>
        <Select 
        value = {criteria}
         onChange={value => {
          setCriteria(value);}}
        displayEmpty>
          <MenuItem disabled value="">
            <em>Search By</em>
          </MenuItem>
          <MenuItem value={1}>First Name</MenuItem>
          <MenuItem value={2}>Last Name</MenuItem>
          <MenuItem value={3}>Phone Number</MenuItem>
          <MenuItem value={4}>Email</MenuItem>
        </Select>
        <br></br><br></br>
         <SearchBar
         value= {searchItem}
         onChange={value => {
          setSearchItem(value);}}
            onRequestSearch={() => console.log('onRequestSearch')}
            style={{
              margin: '0 auto',
              maxWidth: 800
            }}
          />
            </div>
          )
    </div>
  );
}

С моим текущим onChange в Select, я получаю эту ошибку по значению:

Argument of type 'ChangeEvent<{ name?: string | undefined; value: unknown; }>' is not assignable to parameter of type 'SetStateAction<string>'.
  Type 'ChangeEvent<{ name?: string | undefined; value: unknown; }>' is not assignable to type '(prevState: string) => string'.

Если я использую это onChange:

onChange={event => setCriteria(event.target.value)}

Я получаю сообщение об ошибке:

Argument of type 'unknown' is not assignable to parameter of type 'SetStateAction<string>'.
  Type 'unknown' is not assignable to type '(prevState: string) => string'.

Я попытался создать песочницу, но понятия не имею, как устранить ошибку. Код выглядит нормально, но не компилируется: https://codesandbox.io/s/sleepy-buck-5t7bq

Answer 1

При использовании выбора или любого другого поля ввода вам нужно добавить функцию onChange, чтобы обновить значение в состоянии. Как правило, вы также должны придерживаться либо контролируемого входа, либо неконтролируемого не смешивания и сопоставления.

Я исправил ваш код и обновил код, который работает как контролируемый вход.

https://codesandbox.io/s/blissful-payne-frsnt?fontsize=14&hidenavigation=1&theme=dark

import React, { useState } from "react";
import SearchBar from "material-ui-search-bar";
import { MenuItem, Select, Typography } from "@material-ui/core/";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

export default function App() {
  const [criteria, setCriteria] = useState("1");
  const [searchItem, setSearchItem] = useState("");
  console.log(criteria);
  return (
    <MuiThemeProvider>
      <div className="main-content">
        <Select
          displayEmpty
          onChange={e => setCriteria(e.target.value)}
          defaultValue={criteria}
        >
          <MenuItem disabled value="">
            <em>Search By</em>
          </MenuItem>
          <MenuItem value={1}>First Name</MenuItem>
          <MenuItem value={2}>Last Name</MenuItem>
          <MenuItem value={3}>Phone Number</MenuItem>
          <MenuItem value={4}>Email</MenuItem>
        </Select>
        <br />
        <br />
        <SearchBar
          value={searchItem}
          onChange={value => {
            setSearchItem(value);
          }}
          onRequestSearch={() => console.log("onRequestSearch")}
          style={{
            margin: "0 auto",
            maxWidth: 800
          }}
        />
      </div>
    </MuiThemeProvider>
  );
}