时间戳

首页 > 解决方案 > 尝试通过对象数组中动态添加的属性/值进行过滤并保存到状态

javascript - 尝试通过对象数组中动态添加的属性/值进行过滤并保存到状态

问题描述

我想知道是否有人可以提供帮助，我有一个函数，当它运行时它将执行获取并将它获取的对象数组保存到一个变量中，然后它将遍历该对象数组并根据其中的一些数据进行另一次获取获取它将为数组中的每个对象添加一个新的属性/值，我可以正常工作，但是我想通过该新属性值过滤数组并将更新的对象数组设置为状态，问题是过滤器似乎不起作用，我得到的只是未过滤的数据。

下面的代码，任何帮助都会很棒。

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

标签： javascriptreactjs

解决方案

地图不会等待每次提取完成。

异步函数评估为 Promises，因此映射将评估为 Promises 数组。

您需要使用Promise.all来等待一系列 Promise。

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

这里的例子。

推荐阅读