Javascript 尝试通过在对象数组中动态添加属性/值进行筛选并保存到状态

我想知道是否有人可以帮忙，我有一个函数，当它运行时，它将执行一次提取，并将获取的对象数组保存到一个变量中，然后它将循环通过该对象数组并执行另一次提取，并基于该提取中的一些数据，它将向数组中的每个对象添加一个新属性/值，我可以正常工作，然而，我想通过新的属性值过滤数组，并将更新的对象数组设置为state，问题是过滤器似乎不起作用，我得到的只是未过滤的数据

下面的代码，任何帮助都将是惊人的

import { useState, useEffect } from 'react'
import ResultsPage from './components/ResultsPage'

const App = () => {

    const [results, setResults] = useState([])
    const searchedRef = useRef()

    useEffect(() => {
       console.log(results)
    }, [results])

    const handleSearch = async () => {
        let searched = searchedRef.current.value
        let res = await fetch(`someAPI/${searched}`)
        let data = await res.json()
        searchResults = data


        res = null
        data = null

        searchResults.map(async (element) => {
            res = await fetch(`someAPI/${element}`)
            data = await res.json()
            element.name = data.name;
        });

        searchResults = searchResults.filter(element => element.name !== null);

        setResults(searchResults)
    }

    return (
        <>
            <input type="text" ref={searchedRef} onKeyDown={handleSearch}/>
            <ResultsPage results={results} />
        </>
    )

}

export default App

从'react'导入{useState，useffect}
从“./components/ResultsPage”导入ResultsPage
常量应用=（）=>{
const[results，setResults]=useState（[]）
const searchedRef=useRef（）
useffect（（）=>{
console.log（结果）
}[结果]）
const handleSearch=async（）=>{
let searched=searchedRef.current.value
let res=wait fetch（`someAPI/${searched}`）
let data=wait res.json（）
搜索结果=数据
res=null
数据=空
searchResults.map（异步（元素）=>{
res=等待获取（`someAPI/${element}`）
data=wait res.json（）
element.name=data.name；
});
searchResults=searchResults.filter（element=>element.name！==null）；
setResults（搜索结果）
}
返回(
)
}
导出默认应用程序

映射不会等待每次提取完成

异步函数计算为承诺，因此映射将计算为承诺数组

await Promise.all(searchResults.map(/* ... */))

您需要使用

Promise.all

来等待一系列承诺

await Promise.all(searchResults.map(/* ... */))

---

示例。

非常感谢您的款待。此代码正在异步运行

setResults

在使用过滤器更新

searchResults

之前已执行