Javascript 反应挂钩：对象作为反应子错误无效

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

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

函数WikiSearch（）{
const[searchKeyword，setSearchKeyword]=useState（“”）；
const[searchResults，setSearchResults]=useState（[]）；
函数onSearchChangeHandle（事件=“”）{
让term=event.target.value；
setSearchKeyword（术语）；
获取搜索结果（术语）；
}
异步函数getSearchResult（术语）{
常量url=https://en.wikipedia.org/w/api.php';
试一试{
const{data}=wait axios.get（url{
参数：{
操作：“查询”，
来源：“*”，
格式：“json”，
列表：“搜索”，
搜索：术语
}
});
//搜索是一个包含对象的数组
setSearchResults（data.query.search）；//=>导致错误
}捕获（错误）{
控制台错误（error）；
}
}
const listData=searchResults.map（（搜索）=>{
返回(
{search.title}
{search.snippet}
)
});
返回(
搜寻
onSearchChangeHandle（e）}/>
{listData}
)

}

API响应：

我想循环这些搜索结果并在列表中显示数据。可能 search.title和search.snippet

使用

JSON.stringify（*your object*）

将数组/对象转换为字符串，因为JS对象不能是有效的子元素

。。。
返回(
搜寻
onSearchChangeHandle（e）}/>
{JSON.stringify（searchResults）}
)
...

您需要对对象进行解构，以便在渲染器中显示该对象。您想用该对象完成哪些操作？转换为html或仅显示为文本？我不想将数据显示为字符串，我将使用map函数循环数组结果并在列表中显示数据。@Amanjaura-然后这样做！错误是因为您没有。我正在这样做，但我删除了代码以检查问题是否与列表的呈现有关，但即使在删除代码（呈现列表）时，我也会收到相同的错误。所以这个问题不是因为我没有使用数据。