React useState hook - 对象作为 React 子对象无效

Question

我像这篇文章一样编码 useState

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

它抛出

对象作为 React 子对象无效（找到：带有键 {Search1, Search2} 的对象）。 如果您打算渲染一组子项，请改用数组。

完整代码

 import * as React from 'react' const Search = ({ handlerProp, searchQueryProp, inputName }) => { return ( <div className="App"> <input type="text" name={inputName} onChange={handlerProp} value={searchQueryProp} /> </div> ); } 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} inputName="Search1" /> <Search handlerProp={handleEmit} searchQueryProp={searchQuery} inputName="Search2" /> </div> ); }

Answer 1

正如我在添加相关代码之前的评论中提到的，问题出在您的searchQuery对象上。

你为什么会收到这个错误？

您向Search组件传递了一个对象而不是字符串。 input元素，获取一个value属性，它是一个string 。

解决方案：

因此，更改您的App返回部分以传递searchQueryProp的有效string ：

return (
    <div className="App">
      <Search handlerProp={handleEmit} searchQueryProp={searchQuery.search1} inputName="Search1" />
      <Search handlerProp={handleEmit} searchQueryProp={searchQuery.search2} inputName="Search2" />
    </div>
);

注意：始终使用小写字符来定义变量和常量，并且仅在组件名称中使用大写字符。 你定义你的状态与价值Search1以及Search2这是不正确的。