React 道具不显示在控制台中

Question

我有一个页面，其中包含一件白色 T 恤和一个添加到购物篮按钮。

reducer 将操作分派到数据层

export const initialState = {
basket: [],
}

const reducer = (state, action) => {
console.log(action);
switch(action.type) {
    case 'ADD_TO_BASKET':
        return {
            ...state,
            basket: [...state.basket, action.item],
        };

    default:
        return state;
  }
};

export default reducer

这是 WHITETEE.js，我在其中传入图像、名称和价格的值。

       function WHITETEE(id, title, image, price) {

const [state, dispatch] = useStateValue();

const addToBasket = () => {
    dispatch({
        type: 'ADD_TO_BASKET',
        item: {
            id: id,
            title: title,
            image: image,
            price: price
        }
    })
}

return (
    <div className='whitetee'>
        <div className='w-tee__container'>
            <div>
            <Link to='/'>
                <img src= {HAT} className='small__logo'></img>
            </Link>
            </div>
            <div className='showcase__container'>
                
                <section className='product__info'>
                  //When I click the button and console.log the action the value of these props 
                  doesn't show. As I said before, the code inside 'inspect' is different, instead 
                  of for example price='150', it's <p> tags with '150' and a class
                <Product
                    title='WHITE TEE'
                    price='150'
                    image={Tshirt1}
                />
                    <p className='gradient__text' id='size'>Size</p>
                    <button id='add__button' onClick={addToBasket}>ADD TO CART</button>
                    <div className='socials'>
                        <img src={fb} id='fb__icon'></img>
                        <img src={twitter} id='twitter__icon'></img>
                        <img src={pintrest} id='pintrest__icon'></img>
                    </div>
                </section>  
                <div id='description'>
                    <p className='gradient__text' id='description'>Description</p>
                    <p className='gradient__text' id='description2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis elit neque, et pharetra ex mattis nec.</p>
                </div>
            </div>
        </div>    
    </div>
  )
}

export default WHITETEE

当点击“添加到购物篮”按钮时，它会记录以下内容：

{type: 'ADD_TO_BASKET', item: {…}}
item: {id: {…}, title: {…}, image: undefined, price: undefined}
type: "ADD_TO_BASKET"
[[Prototype]]: Object

我的问题是值是空的或未定义的。

Answer 1

每个组件通过第一个参数获取它的属性，通常命名为props。因此你应该解构道具。

代替

function WHITETEE(id, title, image, price) { // <-- This is wrong

你应该写

1. function WHITETEE({id, title, image, price}) {
   

   或

2. function WHITETEE(props) {
     const {id, title, image, price} = props;
   

---

自从你写了

function WHITETEE(id, title, image, price) {

您将第一个参数命名为id。因此所有props 都应该在id 中。第二个参数用于refs。由于您将其命名为title，因此引用将作为title 传递。 image 和 price 将是 undefined，因为 React 不会传递第三个或第四个参数。