为什么我不能将“目录”作为组件属性传递？

Question

我正在尝试将props从container.js传递到flow.js。购物车，结帐和用户道具很好。但是目录属性没有被传递下来。我怎样才能解决这个问题？我唯一可以编辑的是我的组件和json。不是容器或流程。

我的组件：

<Container directory={directoryVar} checkout={checkout} cart={cart} user={user} />

我的const目录变量：

const directoryVar = {
    countries: [
        {
            id: "AD",
            two_letter_abbreviation: "AD",
            three_letter_abbreviation: "AND",
            full_name_locale: "Andorra",
            full_name_english: "Andorra"
        },
        {
            id: "AE",
            two_letter_abbreviation: "AE",
            three_letter_abbreviation: "ARE",
            full_name_locale: "United Arab Emirates",
            full_name_english: "United Arab Emirates"
        }]};

container.js看起来像这样。当我在导出之前进行console.log记录时，它具有值。导出后，值消失了。

import { connect } from 'src/drivers';

import {
    beginCheckout,
    cancelCheckout,
    submitOrder,
    submitPaymentMethodAndShippingAddress,
    postAddressInformation,
    submitShippingAddress,
    submitBillingAddress,
    getStreetByPostCodeNLApi,
    setTotalsAreLoading
} from 'src/actions/checkout';

import Flow from './flow';

const mapStateToProps = ({ cart, checkout, directory, user }) => {
    console.log(user,directory);
    return {
        cart,
        checkout,
        directory,
        user
    };
};

const mapDispatchToProps = {
    beginCheckout,
    cancelCheckout,
    submitOrder,
    submitPaymentMethodAndShippingAddress,
    postAddressInformation,
    submitShippingAddress,
    submitBillingAddress,
    getStreetByPostCodeNLApi,
    setTotalsAreLoading
};

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

Flow.js看起来像这样：

const isCheckoutReady = checkout => {
    const {
        billingAddress,
        paymentData,
        shippingAddress,
        shippingMethod
    } = checkout;

    const objectsHaveData = [
        billingAddress,
        paymentData,
        shippingAddress
    ].every(data => {
        return !!data && !isObjectEmpty(data);
    });

    const stringsHaveData = !!shippingMethod && shippingMethod.length > 0;

    return objectsHaveData && stringsHaveData;
};

/**
 * This Flow component's primary purpose is to take relevant state and actions
 * and pass them to the current checkout step.
 */
const Flow = props => {
    const {
        // state
        cart,
        checkout,
        user,
        directory,

        // actions
        cancelCheckout,
        submitShippingAddress,
        submitOrder,
        submitPaymentMethodAndShippingAddress,
        postAddressInformation,
        submitBillingAddress,
        setStepNumber,
        getStreetByPostCodeNLApi,
        setTotalsAreLoading
    } = props;

console.log的输出：

{} {user:...}

Answer 1

我认为您误会了如何使用redux。您通过组件中的prop传递的值很好。

但是您要在mapStateToProps中获取的值必须来自redux存储。

因此，例如，您有一个名为user的reducer，它具有一个名为data的数组。

您的mapStateToProps将是这样的：

mapStateToProps = state => {
  return {
    userData: state.user.data
  }
};

Answer 2

似乎您正在混淆stateProps和ownProps。要了解这一点，让我们从文档中查看mapStateToProps函数签名：https://react-redux.js.org/using-react-redux/connect-mapstate#defining-mapstatetoprops

function mapStateToProps（state，ownProps？）

传递给该函数的第一个参数是您的Redux状态，传递给该函数的第二个参数是传递给该组件的实际props。

const mapStateToProps = (stateProps, ownProps) => {
    console.log(user,directory);
    return {
       ...stateProps,
       ...ownProps
    };
};