为什么我在我的CollectionCard.js中有这个错误(反应)

Question

在我的控制台中，我得到以下错误

CollectionCard.js:15 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at CollectionCard 

这是我的app.js

    import './App.css';
    import CollectionCard from './components/CollectionCard';
    import Header from './components/Header';
    
    function App() {
      return (
        <div className='app'>
          <Header />
          <CollectionCard id={0} name={'Sgt Wizard'} traits={[{'value': 7}]} image= 'https://ipfs.thirdweb.com/ipfs/QmVWP53xJm9VpCg6nyDoZAbY3P6WXdFsGX9nZ47q6JNEyM/0.jpg' />
        </div>
        
      )  
    }
    
    export default App;

这是我的CollectionCard.js，问题出在这里

    import React from 'react';
    import weth from '../assets/weth.png'
    
    const CollectionCard = (id , name , traits , image) => {
      return (
        <div className='collectionCard'>
            <img src={image} alt='' />
            <div className='details'> </div>
            <div className='name'>
                {name} <div className='id'>.#{id}</div>
            </div>
    
            <div className='priceContainer'>
                <img src={weth} alt=""  className='wethImage'/>
                <div className='price'>{traits[0]?.value}</div>
            </div>
                
        </div>
        )
    };
    
    export default CollectionCard;

知道我做错了什么吗？任何帮助都是非常感谢的！提前谢谢你

Answer 1

您需要在props中对CollectionCard对象进行重构

const CollectionCard = ({ id , name , traits , image }) => {
      ...
      ...
    };

Answer 2

我的第一个猜测是你没有破坏你的道具：

const CollectionCard = (id , name , traits , image) => {

应：

const CollectionCard = ({ id , name , traits , image }) => {