React中的异步道具传递:如何传递密钥来更新React中的redux存储?[首先从较高的组件，然后从redux存储]

Question

我有两个反应组分：TextDropdowns和TextDropDown。TextDropdowns具有多个具有不同数据的TextDropDown组件：

const TextDropDownKeys = DummyData.map((elem) => {
            return <TextDropDown 
                             key = {elem.UniqueIdentifier}
                             Values = {elem.Values}
                             PlaceHolderText = {elem.PlaceHolderText} 
                             UniqueIdentifier = {elem.UniqueIdentifier}
                             AllowMultiSelect = {elem.MultiSelect}
                             isMainHeaderRequired = {elem.isMainHeaderRequired}
                             MainHeader = {elem.isMainHeader}
                             MainHeaderStyling = {elem.isMainHeaderStyling}
                             />
        });

我的商店是这样的：

const initState = {
    ClearAllFilters: false,
    DateFilter: {
        isFilterApplied: false,
        dateData: new Date(),
    },
    key1: 
                                {
                                    Values: ["val1" "val2", "val3"],
                                    SelectedValues: [],
                                    isFilterApplied: false,
    },
    key2: 
                                {
                                    Values: ["val1" "val2", "val3"],
                                    SelectedValues: [],
                                    isFilterApplied: false,
    },
    
    error: false,
};

我的TextDropDown需要连接到一个redux存储，如下所示：

const mapStateToProps = state => {
    return {
        FilterDropDownData: state.sideBar[this.props.key].Values,
        isSelected: state.sideBar[this.props.KeyValue].isFilterApplied,
    }
  
  }

现在出现了一个具有挑战性的问题，我正在通过TextDropDowns中的props传递一个唯一的key，但由于我一次又一次地重用TextDropDown，我只需要更新相应标识符的数据，而不需要更新其他密钥的数据。

由于两个道具同时传递给TextDropDown(一个来自TextDropDowns，因此我得到了这个错误，我需要从两端传递道具(因为其中一个依赖于组件，另一个依赖整个应用程序(，因此我面临着这种模糊性。有人能帮我吗？提前谢谢。

TypeError: Cannot read property 'props' of undefined

Answer 1

您可以将组件道具传递给mapStateToProps函数：

const mapStateToProps = (state, props) => {
return {
    FilterDropDownData: state.sideBar[props.key].Values,
    isSelected: state.sideBar[props.KeyValue].isFilterApplied,
}

}

请注意，不能使用上下文this.props，因为mapStateToProps具有不同的上下文(=不同的this(。