react runtime_error ai_generated true

Warning: A component is changing a controlled input to be uncontrolled (or vice versa). Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

ID: react/controlled-input-with-null-value

Also available as: JSON · Markdown · 中文
88%Fix Rate
85%Confidence
1Evidence
2023-03-15First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React 16.8+ active — — —
React 17.0.2 active — — —
React 18.2.0 active — — —

Root Cause

An input's value prop changed from a defined value to undefined or null (or vice versa) across renders, causing React to interpret the input as switching between controlled and uncontrolled modes.

generic

中文

输入框的 value prop 在渲染之间从已定义值变为 undefined 或 null（或反之），导致 React 将输入解释为在受控和非受控模式之间切换。

Official Documentation

https://reactjs.org/docs/forms.html#controlled-components

Workarounds

  1. 85% success Ensure the value prop is always a defined string or number. For example: <input value={state ?? ''} onChange={...} /> 
    Ensure the value prop is always a defined string or number. For example: <input value={state ?? ''} onChange={...} />
  2. 70% success If the value is intentionally null, use uncontrolled input with defaultValue and a key to reset: <input key={resetKey} defaultValue={initialValue} /> 
    If the value is intentionally null, use uncontrolled input with defaultValue and a key to reset: <input key={resetKey} defaultValue={initialValue} />

中文步骤

  1. Ensure the value prop is always a defined string or number. For example: <input value={state ?? ''} onChange={...} />
  2. If the value is intentionally null, use uncontrolled input with defaultValue and a key to reset: <input key={resetKey} defaultValue={initialValue} />

Dead Ends

Common approaches that don't work:

  1. Setting value to empty string '' instead of null/undefined 30% fail

    If the underlying state is null, converting to '' may mask the real issue and cause empty input when user expects null state.

  2. Using defaultValue instead of value 50% fail

    Switching to uncontrolled mode may break form logic if you need to programmatically update the input value later.

  3. Adding a key prop to force remount 60% fail

    Remounting the component on every state change defeats the purpose of controlled inputs and may cause performance issues or loss of focus.