React useState使用对象类型状态触发Objects are not valid as a React child错误

你给表单input的value属性传递了对象类型的值，触发了React的渲染限制：

Objects are not valid as a React child (found: object with keys {Search1, Search2}). If you meant to render a collection of children, use an array instead.
具体问题出在参数传递逻辑：

• 你在App组件中定义的searchQuery是包含Search1、Search2两个键的对象
• 渲染Search子组件时，你直接把整个searchQuery对象传给了searchQueryProp参数
• 子组件内直接将这个对象绑定到了input的value属性，而input的value只支持字符串、数字等原始类型，React无法将对象渲染为表单值，因此抛出报错。

只需要在父组件传值时，取出和当前inputName匹配的属性值传递即可，修改App组件的渲染代码：

function App() {
  const [searchQuery, setSearchQuery] = React.useState({
    Search1: "",
    Search2: "",
  });

  function handleEmit({ target: { name, value } }) {
    setSearchQuery((prevState) => ({...prevState, [name]: value}));
  }

  return (
    <div className="App">
      {/* 传入对应属性的值，而非整个对象 */}
      <Search handlerProp={handleEmit} searchQueryProp={searchQuery.Search1} inputName="Search1" />
      <Search handlerProp={handleEmit} searchQueryProp={searchQuery.Search2} inputName="Search2" />
    </div>
  );
}

修改后input的value会拿到对应字段的字符串值，报错即可消失，原有状态更新逻辑不需要改动。

内容的提问来源于stack exchange，提问作者Tan Nguyen