React中如何从返回对象提取数组并更新useState状态？

你的问题出在handleSearch函数中，直接把Query2返回的整个对象传给了setProductivities，而我们需要提取对象里的products数组。

修改后的handleSearch函数 #

async function handleSearch () {
    const mol = window.JSDraw.get("test").getMolfile()
    const pds = await Query2(mol)
    // 提取products数组传入状态更新函数
    setProductivities(pds.products)
}

额外优化提示 #

• Query2返回的是符合Result接口的对象，结构为{ products: number[] }，通过.操作符即可访问内部的数组。
• 你的JSX存在HTML结构不规范问题：<h1>标签内直接嵌套<li>不符合标准，建议将列表项包裹在<ul>或<ol>中，同时给每个列表项添加React要求的key属性，还可以渲染出数组里的具体数值：

<ul>
    {products.map((product, index) =>
        <li key={index}>
            {product}
        </li>
    )}
</ul>

内容的提问来源于stack exchange，提问作者Romeo Botanpi