Reactjs 为什么可以'；“我通过了”；目录"；作为组件道具？

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

我的组成部分：

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

container.js看起来像这样。在导出之前，当I 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;

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

console.log的输出：

{} {user:...}

---

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

但是要在MapStateTops中获得的值必须来自redux存储

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

您的mapStateToProps如下所示：

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;

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

---

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

但是要在MapStateTops中获得的值必须来自redux存储

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

您的mapStateToProps如下所示：

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;

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

---

看来你把国家道具和自己的道具搞混了。要了解这一点，让我们看看文档中的mapStateToProps函数签名：

函数mapStateToProps（状态，ownProps？）

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

props

您正在使用容器组件，如下所示：

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

为了使用传入的道具，您必须以以下方式使用它：

const mapStateToProps = (stateProps, ownProps) => {
    return {
       ...ownProps
    };
};

现在，假设您还想使用应用程序的

状态中的附加道具
公司
，并将其传递给底层组件
流
，那么您将使用它，如下所示：

const mapStateToProps = ({ company } , ownProps) => {
    return {
       company,
       ...ownProps
    };
};

看来你把国家道具和自己的道具搞混了。要了解这一点，让我们看看文档中的mapStateToProps函数签名：

函数mapStateToProps（状态，ownProps？）

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

您正在使用容器组件，如下所示：

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

为了使用传入的道具，您必须以以下方式使用它：

const mapStateToProps = (stateProps, ownProps) => {
    return {
       ...ownProps
    };
};

现在，假设您还想使用应用程序的
状态中的附加道具
公司
，并将其传递给底层组件
流
，那么您将使用它，如下所示：

const mapStateToProps = ({ company } , ownProps) => {
    return {
       company,
       ...ownProps
    };
};

由于container.js中的代码似乎有缺陷，请添加reducer代码片段以了解您到底在做什么。mapStateToProps中控制台的输出是什么？@Rikin User是正确的，目录是空的。那么这不是container或Flow组件的错误。看来你把州道具和自己的道具混为一谈了。里金：有什么解决办法吗？propname需要保留在“目录”中，您可以添加reducer代码段以了解您到底在做什么，因为container.js中的代码似乎有缺陷。从
MapStateTrops
内的控制台输出的内容是什么？@Rikin User是正确的，目录是空的。那么这不是容器或流组件的错误。看来你把州道具和自己的道具混为一谈了。里金：有什么解决办法吗？propname需要保留为“目录”，那么为什么其他值工作正常，但目录是唯一没有被传递的道具？您可以用更多信息更新代码吗？我需要明确查看文件、容器和流。那么为什么其他值工作正常，但目录是唯一无法传递的道具？您可以用更多信息更新代码吗？我需要明确查看文件、容器和流。是否有任何不必编辑流或容器的修复程序？因为您提到您只能修改组件，不想编辑流或容器，那么解决方案在于redux reducer以及如何设置状态属性
目录
。你能分享一下关于
目录
是如何设置的吗？我想用目录作为道具来传递我的JSON directoryVar。就我所知，它是在组件本身中设置的。如果你不能修改容器组件，那么将任何道具传递给该组件是没有意义的，唯一的另一种方法是在
状态中创建
目录
，并以某种方式设置其值，以便其被函数
MapStateTrops
使用。是否有任何修复方法，我不必编辑流或容器？因为您提到您只能修改组件，而不想编辑流或容器，然后，解决方案取决于redux reducer以及如何设置state属性
目录
。你能分享一下关于
目录
是如何设置的吗？我想用目录作为道具来传递我的JSON directoryVar。因此，据我所知，它是在组件本身中设置的。如果你不能修改容器组件，那么将任何道具传递给该组件是毫无意义的，唯一的其他方法是在
状态中创建
目录
，并以某种方式设置其值，以便其被函数
MapStateTops
使用