React報錯之`value` prop on `input` should not be null

正文從這開始~

總覽

當我們把一個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 = () => {
  //