数据似乎没有显示在我的表中的Axios API调用内的React相信错误是与下面的这个控制台错误。
遵循YT教程https://www.youtube.com/watch?v=AcYhi08e404
无法读取未定义的属性（阅读'map'）]
APP.JS

import React, { useEffect, useState } from 'react';
import { Route, Routes } from 'react-router-dom';
import Navbar from './components/Navbar';
import { ThemeProvider } from './context/ThemeContext';
import Home from './pages/Home';
import Signin from './pages/Signin';
import Signup from './pages/Signup';
import Account from './pages/Account';
import axios from 'axios';

function App() {
    const [coins, setCoins] = useState([]);

    useEffect(() => {
      axios.get(
          'https://api.coingecko.com/api/v3/coins/markets?vs_currency=gbp&order=market_cap_desc&per_page=10&page=1&sparkline=true'
        )
        .then(res => {
          setCoins(res.data);
          console.log(res.data);
        })
        .catch(error => console.log(error));
    }, []);

  return <ThemeProvider>
    <Navbar />
    <Routes>
  <Route path='/' element={<Home coins={coins} />} />
  <Route path='/signin' element={<Signin />} />
  <Route path='/signup' element={<Signup />} />
  <Route path='/account' element={<Account />} />
    </Routes>
    </ThemeProvider>;
}

export default App;

COINSEARCH.JSX

    import React  from 'react';
    import CoinItem from './CoinItem';

    const CoinSearch = ({ coins }) => {
        return (
          <div>
            <div>
            <h1>Search</h1>
            <form>
              <input type="text" placeholder='Search'/>
            </form>
          </div>

          <table className='w-full border-collapse text-center'>
            <thead>
              <tr className='border-b'>
                <th></th>
                <th className='px-4'>#</th>
                <th className='text-left'>Coin</th>
                <th></th>
                <th>Price</th>
                <th>24h</th>
                <th className='hidden md:table-cell'>24h Volume</th>
                <th className='hidden sm:table-cell'>Mkt</th>
                <th>Last 7 Days</th>
              </tr>
            </thead>
            <tbody>
              <tr>
              {coins.map((coin) => (
                <CoinItem key={coin.id} coin={coin} />
              ))}
              </tr>
              </tbody>
            </table>
          </div>
        );
      };

    export default CoinSearch;

    COINITEM.JSX

    import React from 'react'
    import { AiOutlineStar } from 'react-icons/ai'
    import { Sparklines, SparklinesLines } from 'react-sparklines';

    export const CoinItem = ({coin}) => {
      return (
        <tr>
        <td>
          <AiOutlineStar />
        </td>
        <td>{coin.market_cap_rank}</td>
        <td>
          <div>
            <img src={coin.image} alt={coin.id} /> 
            <p>{coin.name}</p>
          </div>
        </td>
        <td>{coin.symbol}</td>
        <td>{coin.current_price}</td>
        <td>{coin.price_change_percentage_24h}</td>
        <td>{coin.total_volume}</td>
        <td>{coin.market_cap}</td>
        <td>
          <Sparklines data={coin.sparkline_in_7d.price}>
            <SparklinesLines color='green' />
          </Sparklines>
        </td>
    </tr>
      );
    };

export default CoinItem;

合理的新React和努力克服这一障碍，任何帮助将不胜感激！