React Hook：對象作為 React 子錯誤無效

Question

當我調用掛鈎回調 function“ setSearchResults ”來設置 state 時，我收到“對象作為 React 子項無效”錯誤。 state 值是一個包含對象的數組，但我不確定為什么會收到此錯誤以及如何解決它。

function WikiSearch() {
const [searchKeyword, setSearchKeyword] = useState('');
const [searchResults, setSearchResults] = useState([]);

function onSearchChangeHandle(event = "") {
    let term = event.target.value;
    setSearchKeyword(term);
    getSearchResult(term);
}

async function getSearchResult(term) {
    const url = 'https://en.wikipedia.org/w/api.php';
    try {
        const {data} = await axios.get(url, {
            params: {
                action: 'query',
                origin: '*',
                format: 'json',
                list: 'search',
                srsearch: term
            }
            
        });
        
        // search is an array having objects
        setSearchResults(data.query.search);  // => causing error

      } catch (error) {
        console.error(error);
      }
}
 
const listData = searchResults.map((search ) => {
    return (
        <Fragment key={search.pageid}>
            <div>
                <span>
                    {search.title}
                </span>
            </div>
            <div>
                <span>
                    {search.snippet}
                </span>
            </div>
        </Fragment>
    )
});

return (
    <div>
        <div className="ui form">
            <div className="field">
                <label>Search</label>
                <input className="input" type="text" name="search" value={searchKeyword} onChange={(e) => onSearchChangeHandle(e) }/>
            </div>  
        </div>
        {listData}
     </div>
)

}

API 響應：

我想遍歷這些搜索結果並在列表中顯示數據。 可能是search.title和search.snippet 。

Answer 1

使用JSON.stringify(*your object*)將您的數組/對象轉換為字符串，因為 JS 對象不能是有效的 React 子元素

...
return (
    <div>
        <div className="ui form">
            <div className="field">
                <label>Search</label>
                <input className="input" type="text" name="search" value={searchKeyword} onChange={(e) => onSearchChangeHandle(e) }/>
            </div>  
           {JSON.stringify(searchResults)}
        </div>
        
     </div>
)
...