在 React 中解构数据

Question

So the thing I am trying to do is to destructure coinsData, so I can use the id globally and keep the coinsData so I can iterate it somewhere else. Right now I am having a problem with typescript on export CoinProvider Type '({ children }: { children?: ReactNode; }) => void' is not assignable to type 'FC<{}>' Help would be appreciated

import React,{FC, useState, useEffect} from 'react'

export interface Coin  {
    id:string;
    name: string;
    current_price: number;
    symbol:string;
    price_change_percentage_24h:number
    image:string;
    market_cap:number
    market_cap_rank:number
    }
 export const CoinContext = React.createContext<Coin[] | undefined>(undefined)

 export const CoinProvider:FC= ({children}) => {
    const [loading, setLoading] =useState(false)
    const [page, setPage] = useState(1);
    const [totalPages, setTotalPages] = useState(10);
    const [coinsData, setCoinsData] = useState<Coin[]>([])
  
    const handlePrevPage = () => {
      setPage((prevPage) => prevPage - 1);
    };
  
    const handleNextPage = () => {
      setPage((nextPage) => nextPage + 1);
    };
          
        useEffect(()=>{
         const fetchData= async()=>{
         setLoading(true);
         const response= await fetch(`https://api.coingecko.com/api/v3/coins/markets? 
         vs_currency=usd&order=market_cap_desc&page=${page}&per_page=10&sparkline=false`)
         const result = await response.json()
            setCoinsData(result); 
            setTotalPages(totalPages);
            setLoading(false)
     
        }
            fetchData()
        },[page, totalPages])
  
      
    
      const Coins = coinsData.map((item) => {
        const {
        id, 
        } = item
    return(
    <CoinContext.Provider value={{Coins, totalPages, id, loading, handlePrevPage, handleNextPage, 
      currentPage:{ page }}}>
        {children}
    </CoinContext.Provider>
    )
}

Answer 1

You forgot about }) in line 47. And logic there should look like this:

const Coins = coinsData.map((item) => item.id)

Answer 2

Your component is missing a return statement.

Make sure to return an HTML that can be rendered.

return <>
    {coinsData.map((item) => {
        const { id } = item
        return (
            <CoinContext.Provider value={[{ id: 'id', current_price: 1, image: 'image', market_cap: 0, market_cap_rank: 0, name: 'name', price_change_percentage_24h: 0, symbol: 'symbol' }]}>
                {children}
            </CoinContext.Provider>
        )
    })
    }
</>

And, don't forget to close the map function with the parenthesis )

In case, you only want to pass coinsData

    return <CoinContext.Provider value={...coinsData}>
        {children}
    </CoinContext.Provider>

you can renounce the map and simplify your code with destructuring your coinsData directly.