reactjs - 如何修复此警告“不建议在严格模式下使用 UNSAFE_componentWillReceiveProps，这可能表明您的代码中存在错误

Question

我使用了反应评级并收到此警告

警告：不建议在严格模式下使用 UNSAFE_componentWillReceiveProps，这可能表明代码中存在错误。有关详细信息，请参阅 https://reactjs.org/link/unsafe-component-lifecycles。

• 将数据获取代码或副作用移动到 componentDidUpdate。
• 如果您在 props 更改时更新状态，请重构您的代码以使用记忆技术或将其移动到静态 getDerivedStateFromProps。了解更多信息： https ://reactjs.org/link/derived-state

请更新以下组件：Rating、RatingAPILayer

这是我的代码

import React from 'react';
import Rating from 'react-rating';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faShoppingCart, faStar } from '@fortawesome/free-solid-svg-icons'
import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
import './Product.css'

const Product = props => {
    const { img, name, price, seller, stock, star } = props.product;
    const cartIcon = <FontAwesomeIcon icon={faShoppingCart} />
    const ratingStar = <FontAwesomeIcon icon={faStar} />
    const ratingStar2 = <FontAwesomeIcon icon={farStar} />

    return (
        <div className="product">
            <div>
                <img src={img} alt="" />
            </div>
            <div className="product-details">
                <h3 className="product-name">{name}</h3>
                <p><small>By: {seller}</small></p>
                <h3 className="product-price">${price}</h3>
                <p>only {stock} left in stock - order soon</p>
                <Rating className="icon-color"
                    initialRating={star}
                    emptySymbol={ratingStar2}
                    fullSymbol={ratingStar}
                />
                <button
                    onClick={() => props.handleAddToCart(props.product)}
                    className="btn-regular">
                    {cartIcon} add to cart
                </button>
            </div>
        </div>
    );
};

export default Product;

有人知道如何解决这个问题吗？

标签： reactjsreact-rating