У меня есть это предупреждение, и я не знаю, как от него избавиться. У меня есть основной компонент Измерения, который содержит значок поиска. Когда я нажимаю на значок, он превращается в строку поиска. Эта панель поиска является компонентом, импортированным в компонент "Измерения". Когда я набираю в строке поиска это предупреждение с контролируемым / неконтролируемым компонентом.

• реагировать: ^ 16.12.0,
• @ material-ui / core: ^ 4.9.1,
• @ material-ui / icons: ^ 4.9.1,
• @ material-ui / lab: ^ 4.0.0-alpha.42,

    Warning: A component is changing an uncontrolled input of type search 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: h t tps:/ /fb .me /react-controlled-components
        in input (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(TextField))
        in div (created by ForwardRef(FormControl))
        in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
        in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField))
        in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))
        in WithStyles(ForwardRef(TextField)) (at Search.js:63)
        in div (at Search.js:52)
        in Search (at Measurements.js:862)
        in div (at Measurements.js:857)
        in div (at Measurements.js:833)
        in div (created by ForwardRef(Paper))
        in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
        in WithStyles(ForwardRef(Paper)) (at Measurements.js:832)
        in div (at Measurements.js:831)
        in div (at Measurements.js:817)
        in div (at Measurements.js:811)
        in Measurements (created by Context.Consumer)
        in Route (at Content.js:74)
        in Switch (at Content.js:68)
        in main (at Content.js:64)
        in Content (at Main.js:469)
        in div (at Main.js:189)
        in ThemeProvider (at Main.js:187)
        in Main (at App.js:53)
        in Router (created by BrowserRouter)
        in BrowserRouter (at App.js:52)
        in App (at src/index.js:19)
        in Provider (at src/index.js:18)

А мой компонент выглядит так:

import { InputAdornment, TextField } from '@material-ui/core'
import { SearchOutlined } from '@material-ui/icons'
import debounce from 'lodash/debounce'
import React from 'react'
import { useDispatch } from 'react-redux'

import styles from './Search.module.scss'

const handleNewSearchValue = debounce(props => {
  const { dispatch, changePage, setSearchValue, name, value } = props
  dispatch(changePage(1))
  if (value) {
    setSearchValue({ [name]: value })
  } else {
    setSearchValue({})
  }
}, 1000)

export default function Search(props) {
  const dispatch = useDispatch()
  const {
    openSearch,
    handleOpenSearch,
    setSearchValue,
    preSearchValue,
    setPreSearchValue,
    changePage,
  } = props

  const handleSearch = e => {
    const { value, name } = e.target

    const handlePreSearchAndSearch = () => {
      if (value) {
        setPreSearchValue({ [name]: value })
      } else {
        setPreSearchValue({})
      }
      handleNewSearchValue({
        dispatch,
        changePage,
        setSearchValue,
        name,
        value,
      })
    }

    return handlePreSearchAndSearch()
  }

  return (
    <div
      className={` ${styles.searchBar} ${
        openSearch && styles.expandedSearchBar
      }`}>
      {!openSearch ? (
        preSearchValue && preSearchValue.criteria ? (
          <p className={styles.searchValue}>{preSearchValue.criteria}</p>
        ) : (
          <SearchOutlined className={styles.searchIcon} />
        )
      ) : (
        <TextField
          className={styles.searchInput}
          fullWidth
          autoComplete='off'
          type='search'
          autoFocus
          name='criteria'
          value={preSearchValue.criteria}
          InputProps={{
            disableUnderline: true,
            startAdornment: (
              <InputAdornment
                onClick={() => handleOpenSearch(false)}
                position='start'
                className={styles.inputAdornment}>
                <Search fontSize='small' />
              </InputAdornment>
            ),
          }}
          onChange={handleSearch}
        />
      )}
    </div>
  )
}

Компонент поиска импортируется в другой компонент:

export default function Measurements() {

//search state
  const [openSearch, setOpenSearch] = useState(false)
  const [preSearchValue, setPreSearchValue] = useState({})
  const [searchValue, setSearchValue] = useState({})

  const handleOpenSearch = open => {
    if (open && !openSearch) {
      setOpenSearch(open)      
    }
    if (!open && openSearch) {
      setOpenSearch(open)
    }
  }

....

  useEffect(()=>{
    dispatch(fetchMeasurements(searchValue))
  },[searchValue])

return (
  <>
    <div className={`${styles.searchButton} ${openSearch && styles.expandedSearchBar}`}
        onClick={() => handleOpenSearch(true)}>
          <SearchBar
            openSearch={openSearch}
            handleOpenSearch={handleOpenSearch}                      
            searchValue={searchValue}
            setSearchValue={setSearchValue}
            preSearchValue={preSearchValue}
            setPreSearchValue={setPreSearchValue}
            changePage={changePage}
      />
     </div>
....
  <>)