Question

我正在尝试将类组件转换为功能组件，但我一直遇到问题，我认为我做错了

类组件：

class CountC extends React.Component {

    componentDidMount() {
        this.props.refreshCart();
      }

 render(){
        const { cart } = this.props;

        return (
           <p> {`${cart !== null ? cart.order_items.length : 0}`}</p>
);
}};

const mapStateToProps = state => {
    return {

      cart: state.cart.shoppingCart,
    };
  };


const mapDispatchToProps = dispatch => {
    return {
        refreshCart: () => dispatch(fetchCart()),

    }
}

export default connect(mapStateToProps, mapDispatchToProps)(CountC);

这就是我作为我的功能组件尝试做的事情（请注意我还不了解功能组件）

function CountC(props) {
  const [refreshCart, setRefreshCart] = useState();
  
  useEffect(() => {
    setRefreshCart(true);
    console.log("component mounted!");
  }, []);

return ( <p> {`${cart !== null ? cart.order_items.length : 0}`}</p> );

 const mapStateToProps = state => {
        return {
    
          cart: state.cart.shoppingCart,
        };
      };
    
    
    const mapDispatchToProps = dispatch => {
        return {
            refreshCart: () => dispatch(fetchCart()),
    
        }
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(CountC);

它没有给我想要的输出，我试过调整它，仍然！，

Answer 1

请试试这个。

 const CountC = () => {
  const dispatch = useDispatch();
  const cart = useSelector((state) => state.cart.shoppingCart);

  useEffect(() => {
    dispatch(refreshCart());
  }, [dispatch]);

  return <p> {`${cart !== null ? cart.order_items.length : 0}`}</p>;
}

Answer 2

mapStateToProps 和 mapDispatchToProps 应该在组件之外，在使用功能组件时，你应该使用 props.cart 和 props.refreshCart() 而不是 this.props.cart 和 this.props.refreshCart()

    function CountC(props) {
          
          useEffect(() => {
            props.refreshCart(true);
            console.log("component mounted!");
          }, []);
        
        return ( <p> {`${props.cart !== null ? props.cart.order_items.length : 0}`}</p> );
        
      }
        
        const mapStateToProps = state => {
           return {
              cart: state.cart.shoppingCart,
                };
        };
            
            
        const mapDispatchToProps = dispatch => {
           return {
              refreshCart: () => dispatch(fetchCart()),
                  }
        }
            
  export default connect(mapStateToProps, mapDispatchToProps)(CountC);

你也可以使用 useSelector 和 useDispatch 钩子代替 mapStateToProps 和 mapDispatchToProps

    import {useSelector, useDispatch} from 'react-redux'


    function CountC(props) {

          const cart = useSelector(state => state.cart.shoppingCart)
         
          const dispatch= useDispatch()

          useEffect(() => {
            dispatch.refreshCart(true);
            console.log("component mounted!");
          }, [dispatch]);

        return ( <p> {`${props.cart !== null ? props.cart.order_items.length : 0}`}</p> );
      }

  export default CountC;

使用 props 将类组件更改为功能组件

2 个答案: