React父组件传递card Prop后子组件无法访问问题求助

我在React项目中从父组件App向子组件Card传递了card等Prop，但子组件解构card后，IDE提示该Prop已声明但未被读取，截图中card变灰也说明它未被使用，无法正常访问。

父组件代码 #

import {useState } from 'react';

// importing styles
import './styles/Card.css'

// importing components
import Card from './components/Card'

const images = [
  {"src": "/img/clock.jpg"},
  {"src": "/img/dome.jpg"},
  {"src": "/img/fcse.jpg"},
  {"src": "/img/gate.jpg"},
  {"src": "/img/lib.jpg"},
  {"src": "/img/tuck.jpg"},
]

function App() {
const [card, setCard ] = useState([])
const[turn, setTurn ] = useState(0)
const [choiceOne, setChoiceOne] = useState(null)
const [choiceTwo, setChoiceTwo ] = useState(null)

  const shuffle = () =>{
    const shuffledCards = [...images, ...images]
      .sort(()=>{
        return (Math.random() - 0.5)
      })
      .map((card ) => ({...card, id: Math.random()}))

      setCard(shuffledCards)
      setTurn(0)
  }

  console.log(card, turn)

  const handleChoice = (card)=>{
    console.log(card)
  }

  return (
    <div className="App">
      {/* navbar */}
      <div className="nav">
          <h1 className="title">Memory Game!</h1>
          <button className="btn" onClick={shuffle}>Reset Game</button>
      </div>

      {/* card grid */}
      <div className="card-grid">
        {card.map((card)=>{
            return(
                  <Card
                    handleChoice = {handleChoice}
                    card={card}
                    key={card.id}
                    source = {card.src}
                    cover = "../img/logo.png"
                  />
            )
        })}
      </div>
    </div>
  );
}

export default App;

子组件代码 #

import '../styles/Card.css'

const Card = ({source, card, cover, handleChoice}) => {
    
    const handleClick = ( card ) => {
        handleChoice(card)
    }

    return ( 
        <div className="card">
                <img className='front' src={source}/>
                <img className='back' onClick={handleClick} src={cover}/>
        </div>
     );
}

export default Card;

问题截图 #

问题原因 #

子组件的handleClick函数定义了同名局部参数card，这个局部变量覆盖了从Props解构得到的card，导致解构的card完全没被使用，所以IDE提示未读取。

解决方案 #

去掉handleClick的参数，直接使用Props中的card：

import '../styles/Card.css'

const Card = ({source, card, cover, handleChoice}) => {
    
    const handleClick = () => {
        handleChoice(card)
    }

    return ( 
        <div className="card">
                <img className='front' src={source}/>
                <img className='back' onClick={handleClick} src={cover}/>
        </div>
     );
}

export default Card;

内容的提问来源于stack exchange，提问作者CoderCat