解决React报错`value` prop on `input` should not be null

时间:2022-12-05 chuck 人气:0

总览

当我们把一个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 = () => {
  //

加载全部内容