从 API (redux-toolkit) 中排序数据

Question

我正在使用 React 和 redux-toolkit 构建一个加密应用程序。我正在尝试找到一种方法来管理来自 API 的数据。更具体地说，我希望能够按价值、数量等进行排序，并为每个硬币添加一个“isFavourite”属性，但我认为（如果我错了请纠正我）唯一的方法是通过将数据复制到另一个状态。到目前为止我尝试过的是添加另一个状态，我在其中传递了这样的数据：

const [list, setList] = useState()
    useEffect(() => {
        setList(data)
    }, [data])


//"const coinData = list?.data?.coins" instead of "const coinData = data?.data?.coins"

但随后发生错误，因为“列表”上的数据是“未定义”的。下面的代码是运行没有任何问题的代码。我如何管理 API 数据？我走在正确的道路上还是有更巧妙的方法来做我想做的事？谢谢！

function Main () {
    const { data, error, isFetching } = useGetCryptosQuery()

    if(isFetching) return 'Loading...'

    const globalStats = data?.data?.stats
    const coinData = data?.data?.coins
  
    const coinList = coinData.map(coin => {
        return (
        <Coin 
            price = {coin.price}
            key = {coin.uuid}
            id = {coin.uuid}
            name = {coin.name}
            icon = {coin.iconUrl}

        />)
    })

    
    return (
        <div>
            <h2>Main</h2>
           
               {coinList}

        </div>

    )
}

export default Main

Answer 1

你走在正确的轨道上 - 我设置了类似的东西并添加了一个 null 检查来尝试映射数据，这避免了你可能遇到的错误。

const coinList = coinData ? coinData.map((coin) => {
///...coin component 
}) : <div></div>;

然后，它将 return 一个空的 div，而不是未定义数据的错误 - 直到数据存在，然后它才会呈现正常。

从 API (redux-toolkit) 中排序数据

Sorting data from an API (redux-toolkit)

arrays

sorting

reactjs

redux-toolkit