React表单初始渲染时输入框显示[object Object]而非占位符问题

错误原因 #

在BookForm.js中，你给useState传入了BookContext作为初始值——这是一个Context对象，当React把这个对象渲染到input的value属性时，会自动将其转换为字符串[object Object]，直接覆盖了占位符的显示（占位符仅在value为空时才会显示）。

修正代码 #

把title和author的初始state改成空字符串即可：

const BookForm = () => {
  const { dispatch } = useContext(BookContext);
  // 这里把初始值从BookContext改为空字符串''
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_BOOK', book: { title, author } });
    setTitle('');
    setAuthor('');
  };
  // 剩余代码保持不变
};

补充说明 #

input的value属性是受控的，只要它有非空值，占位符就不会显示。你之前的初始值是Context对象，转成字符串后是非空的，所以占位符被隐藏，取而代之的是对象的字符串表示[object Object]。改成空字符串后，初始状态下value为空，占位符就能正常显示了。

内容的提问来源于stack exchange，提问作者Amir Khaleghi