【React】 `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.の対処法

症状

ReactでMaterialUIのAPPbarを使用したときに以下の警告が表示されました。

翻訳すると、「inputの valuepropはnullであってはなりません。空の文字列を使用してコンポーネントをクリアするか、制御されていないコンポーネントの場合は「未定義」を使用することを検討してください。」でした。
わかりやすい。。。

warn

 `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.

以下ソースです。(元ソースは色々入れてしまったので、MaterialUIのApp Bar with a primary search fieldから一部抜粋で)
searchfieldで関係ありそうなところのみ

App.js

export default function PrimarySearchAppBar() {
  const SessionUserState = useContext(SessionState);
  const SessionUserDispatch = useContext(SessionDispatch);
  const [searchValue, setSearchValue] = useState(SessionUserState.searchWord);

  return (
    <div className={classes.search}>
      <div className={classes.searchIcon}
        <SearchIcon />
      </div>
      <InputBase
        placeholder="Search foods…"
        value={searchValue}
        onKeyPress={(event) =>
          onKeyPressSerchWord(event)
        }
        onChange={(event) => {
          setSearchValue(event.target.value)
        }
        }
        classes={{
          root: classes.inputRoot,
          input: classes.inputInput,
        }}
        inputProps={{ 'aria-label': 'search' }}
      />
    </div>
  )
}

解決策

このwarnではinputにnullが入ってしまう瞬間があったため、発生したようです。 今回の例だと、Reducerから値を受け取るまでにinputにnullが入る瞬間があったため、nullの時は空文字が入るように修正して解決しました。

App.js

export default function PrimarySearchAppBar() {
  const SessionUserState = useContext(SessionState);
  const SessionUserDispatch = useContext(SessionDispatch);
  const [searchValue, setSearchValue] = useState(SessionUserState.searchWord === null ? "" : SessionUserState.searchWord);

  return (
    <div className={classes.search}>
      <div className={classes.searchIcon}
        <SearchIcon />
      </div>
      <InputBase
        placeholder="Search foods…"
        value={searchValue}
        onKeyPress={(event) =>
          onKeyPressSerchWord(event)
        }
        onChange={(event) => {
          setSearchValue(event.target.value)
        }
        }
        classes={{
          root: classes.inputRoot,
          input: classes.inputInput,
        }}
        inputProps={{ 'aria-label': 'search' }}
      />
    </div>
  )
}

参考