Javascript 失败的道具类型：道具'value'在'Rating'中标记为必需，但其值为'undefined'`

失败的道具类型：道具

值

在

评级

中标记为所需，但其值为

未定义

我是react新手，尝试解决此问题，但我无法解决。我是新来的

productScreen.js

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { Row, Col, Image, ListGroup, Card, Button, Form } from 'react-bootstrap';
import Rating from '../components/Rating';
import Loader from '../components/Loader';
import Message from '../components/Message';
import { ListProductDetails } from '../actions/productActions';

const ProductScreen = ({ history, match }) => {
    const [qty, setQty] = useState(1);
    const dispatch = useDispatch();

    const productDetails = useSelector(state => state.productDetails);
    const { loading, error, product } = productDetails

    useEffect(() => {
        dispatch(ListProductDetails(match.params.id));
    }, [dispatch, match])


    const addToCartHanddler = () => {
        history.push(`/cart/${match.params.id}?qty=${qty}`)
    }

    return (
        <>
            <Link className='btn btn-info my-3' to='/'>
                Go Back
            </Link>
            { loading ? (
                <Loader />
            ) : error ? (
                <Message variant='danger'>{error}</Message>
            ) : (
                <Row>
                    <Col md={6}>
                        <Image src={product.image} alt={product.name} fluid />
                    </Col>
                    <Col md={3}>
                        <ListGroup variant='flush'>
                            <ListGroup.Item>
                                <h3>{product.name}</h3>
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <Rating 
                                    value={product.rating} 
                                    text={`${product.numReviews} reviews`} />
                            </ListGroup.Item>
                            <ListGroup.Item>
                                Price: ${product.price}
                            </ListGroup.Item>
                            <ListGroup.Item>
                                Description: ${product.description}
                            </ListGroup.Item>
                        </ListGroup>
                    </Col>
                    <Col md={3}>
                        <Card>
                            <ListGroup variant='flush'>
                                <ListGroup.Item>
                                    <Row>
                                        <Col>  
                                            Price:
                                        </Col>
                                        <Col>  
                                            <strong>${product.price}</strong>
                                        </Col>
                                    </Row>
                                </ListGroup.Item>

                                <ListGroup.Item>
                                    <Row>
                                        <Col>  
                                            Status:
                                        </Col>
                                        <Col>  
                                            {product.countInStock > 0 ? 'In Stock' : 'Out of Stock'}
                                        </Col>
                                    </Row>
                                </ListGroup.Item>

                                {product.countInStock > 0 && (
                                    <ListGroup.Item>
                                        <Row>
                                            <Col>Qty</Col>
                                            <Col>
                                                <Form.Control as='select' value={qty} onChange={(e) => setQty(e.target.value)}>
                                                    {[...Array(product.countInStock).keys()].map((x) => (
                                                        <option key={x+1} value={x+1}>{x+1}</option>
                                                    ))}
                                                </Form.Control>
                                            </Col>
                                        </Row>
                                    </ListGroup.Item>
                                )}

                                <ListGroup.Item>
                                    <Button 
                                        onClick={addToCartHanddler}
                                        className='btn-block' 
                                        type='button' 
                                        disabled={product.countInStock > 0 ? false : true}>
                                        Add to Cart
                                    </Button>
                                </ListGroup.Item>
                            </ListGroup>
                        </Card>
                    </Col>
                </Row>
            )}
        </>
    )
}

export default ProductScreen

import React，{useState，useffect}来自“React”；
从'react router dom'导入{Link}；
从'react redux'导入{useDispatch，useSelector}；
从“react bootstrap”导入{Row，Col，Image，ListGroup，Card，Button，Form}；
从“../components/Rating”导入评级；
从“../components/Loader”导入加载程序；
从“../components/Message”导入消息；
从“../actions/productActions”导入{ListProductDetails}；
const ProductScreen=（{history，match}）=>{
const[qty，setQty]=useState（1）；
const dispatch=usedpatch（）；
const productDetails=useSelector（state=>state.productDetails）；
const{loading，error，product}=productDetails
useffect（（）=>{
调度（ListProductDetails（match.params.id））；
}，[发送，匹配]）
常量addToCarthAndler=（）=>{
history.push（`/cart/${match.params.id}？数量=${qty}`）
}
返回(
回去
{加载(
)：错误(
{错误}
) : (
{product.name}
价格：${product.Price}
描述：${product.Description}
价格：
${product.price}
地位：
{product.countInStock>0？'In Stock'：'Out Stock'}
{product.countInStock>0&&(
数量
设置数量（如目标值）}>
{[…数组（product.countInStock.keys（）].map（（x）=>(
{x+1}
))}
)}
0？false:true}>
添加到购物车
)}
)
}
导出默认产品屏幕

Rating.js

import React from 'react';
import PropTypes from 'prop-types';

const Rating = ({ value, text, color }) => {
    return (
        <div className='rating'>
            <span>
                <i style={{color}}
                    className={
                    value >= 1 
                    ? 'fas fa-star' 
                    : value >= 0.5 
                    ? 'fas fa-star-half-alt' 
                    : 'far fa-star'}></i>
            </span>
            <span>
                <i style={{color}}
                    className={
                    value >= 2 
                    ? 'fas fa-star' 
                    : value >= 1.5 
                    ? 'fas fa-star-half-alt' 
                    : 'far fa-star'}></i>
            </span>
            <span>
                <i style={{color}}
                    className={
                    value >= 3 
                    ? 'fas fa-star' 
                    : value >= 2.5 
                    ? 'fas fa-star-half-alt' 
                    : 'far fa-star'}></i>
            </span>
            <span>
                <i style={{color}}
                    className={
                    value >= 4 
                    ? 'fas fa-star' 
                    : value >= 3.5 
                    ? 'fas fa-star-half-alt' 
                    : 'far fa-star'}></i>
            </span>
            <span>
                <i style={{color}}
                    className={
                    value >= 5 
                    ? 'fas fa-star' 
                    : value >= 4.5 
                    ? 'fas fa-star-half-alt' 
                    : 'far fa-star'}></i>
            </span>
            <span>{text && text}</span>
        </div>
    )
}

Rating.defaultProps = {
    color: '#f8e825'
}

Rating.propTypes = {
    value: PropTypes.number.isRequired,
    text: PropTypes.string.isRequired,
    color: PropTypes.string,
}

export default Rating;

从“React”导入React；
从“道具类型”导入道具类型；
常数等级=（{值、文本、颜色}）=>{
返回(
= 1 
“法航之星”
：值>=0.5
？fas fa star半高度'
：“远法之星”}>
= 2 
“法航之星”
：值>=1.5
？fas fa star半高度'
：“远法之星”}>
= 3 
“法航之星”
：值>=2.5
？fas fa star半高度'
：“远法之星”}>
= 4 
“法航之星”
：值>=3.5
？fas fa star半高度'
：“远法之星”}>
= 5 
“法航之星”
：值>=4.5
？fas fa star半高度'
：“远法之星”}>
{text&&text}
)
}
Rating.defaultProps={
颜色：'#f8e825'
}
Rating.propTypes={
值：PropTypes.number.isRequired，
text:PropTypes.string.isRequired，
颜色：PropTypes.string，
}
出口违约评级；

您可以将

评级

定义为

默认道具之一

如

颜色

Rating.defaultProps = {
    color: '#f8e825',
    rating: 0,
}

---

你可以删除下面的代码

评级.属性类型=

{ 值：PropTypes.number.isRequired

text: PropTypes.string.isRequired,

color: PropTypes.string,

---

}

尝试在

productScreen

组件中注销

product

。我假设它没有一个叫做“评级”的属性，所以它是未定义的。