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這是不正確的。