React Hook：对象作为 React 子错误无效

Question

当我调用钩子回调函数“setSearchResults”来设置状态时，出现“对象作为 React 子对象无效”错误。状态值是一个包含对象的数组，但我不确定为什么会收到此错误以及如何解决它。

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>
)
...