注释从这开始~
总览
当咱们把一个input的初始值设置为null或者笼罩初始值设置为null时，会产生"valueprop on input should not be null"正告。比如说，初始值来自于空的API响应。能够应用一个回退值来解决这个问题。
这里有个例子来展现谬误是如何产生的。
export default function App() { // ⛔️ Warning: `value` prop on `input` should not be null. // Consider using an empty string to clear the component or `undefined` for uncontrolled components. return ( <div> <input value={null} /> </div> );}上述代码的问题在于，咱们为input表单的value属性设置为null，这是不被容许的。
你也可能从近程API获取你的input表单的值，并将其设置为null。
回退值
为了解决该问题，咱们能够通过提供回退值，来确保永远不会为input表单的value属性设置null。
import {useState} from 'react';const App = () => { // ️ pass empty string as initial value const [message, setMessage] = useState(''); const handleChange = event => { setMessage(event.target.value); }; // ✅ use fallback, e.g. // value={message || ''} return ( <div> <input type="text" id="message" name="message" onChange={handleChange} value={message || ''} /> </div> );};export default App;咱们把state变量的值初始化为一个空字符串，而不是null。
这样就能够解脱正告，除非在你代码的其余中央将state变量设置为null。
咱们应用逻辑与(||)操作符，如果操作符左侧的为假值(比如说null)，则返回其右侧的值。这能够帮忙咱们确保input表单的value属性永远不会被设置为null。
defaultValue
如果你借助refs应用不受管制的input表单，请不要在input元素上设置value属性，应用defaultValue来代替value属性。
import {useRef} from 'react';const App = () => { const inputRef = useRef(null); function handleClick() { console.log(inputRef.current.value); } return ( <div> <input ref={inputRef} type="text" id="message" name="message" defaultValue="Initial value" /> <button onClick={handleClick}>Log message</button> </div> );};export default App;上述示例应用了不受管制的input。留神input表单上并没有设置onChange或者value属性。
你能够应用defaultValue属性来为不受管制的input传递初始值。然而，这一步骤不是必要的，如果你不想设置初始值，你能够省略该属性。
当应用不受管制的input表单时，咱们应用ref来拜访input元素。每当用户点击例子中的按钮时，不受管制的input 的值都会被记录下来。
你不应该为不受管制的input设置value属性，因为这将使input表单不可变，你将无奈在其中输出。