React native 如何在React Redux中对组件的每个实例调用MapStateTops

我有一个名为AuditionItem的组件，它的多个实例被添加到名为auditionList的父组件中

我已完成导出默认连接（mapStateToProps）（AuditionItem）

根据我的经验，mapstatetops仅在一个AuditionItem实例（启动状态更改的实例）中被调用。但是我想为每个海选实例调用mapStateToProps

有办法做到这一点吗

以下是我的AuditionItem.js代码：

import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import Moment from 'moment';
import colors from './../styles/colors';
import { store } from './../App';
import { addBookmark, removeBookmark } from './../actions/creators';
import { connect } from 'react-redux';

class AuditionItem extends React.Component {

  _toggleBookmark = (auditionId, bookmarked) => {
    if(bookmarked)
      store.dispatch(removeBookmark(auditionId));
    else
      store.dispatch(addBookmark(auditionId));
  }

  render() {
    Moment.locale('en');

    let bookmarked = (this.props.auditions.indexOf(this.props.auditionId) > -1) ? true : false;

    let roleString = String(this.props.role);
    if(roleString.length > 35)
      roleString = roleString.substring(0, 35) + " ...";
    let projectString = String("Project: (" + this.props.productionType + ") " + this.props.project);
    if(projectString.length > 35)
      projectString = projectString.substring(0, 35) + " ...";
    let productionHouseString = String("Production House: " + this.props.productionHouse);
    if(productionHouseString.length > 35)
      productionHouseString = productionHouseString.substring(0, 35) + " ...";
    let iconName = `ios-bookmark${bookmarked ? '' : '-outline'}`;

    return (
      <View style={styles.auditionItemWithBookmark}>
        <View style={styles.bookmark}>
          <TouchableOpacity onPress={() => this._toggleBookmark(this.props.auditionId, bookmarked)} >
            <Ionicons name={iconName} size={25} />
          </TouchableOpacity>
       </View>
        <View style={styles.auditionItem}>
          <Text style={styles.role}>{roleString}</Text>
          <Text style={styles.project}>{projectString}</Text>
          <Text style={styles.productionHouse}>{productionHouseString}</Text>
          <Text style={styles.auditionDate}>Begins: {Moment(String(this.props.auditionDate).replace('"','').replace('"', '')).format('LLLL')}</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  auditionItemWithBookmark: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: colors.auditionItemBackgroundColor,
    borderRadius: 10,
    margin: 10,
    padding: 15,
  },
  bookmark: {
    flex: 1,
    paddingTop: 5,
  },
  auditionItem: {
    flex: 8,
    flexDirection: "column",
    backgroundColor: colors.auditionItemBackgroundColor,
  },
  role: { color: colors.auditionItemColor, fontSize: 20, fontWeight: "bold" },
  project: { color: colors.auditionItemColor },
  productionHouse: { color: colors.auditionItemColor },
  auditionDate: { color: colors.auditionItemColor },
});

const mapStateToProps = state => {
  return {
    auditons: state.bookmarks.auditions,
  }
}

export default connect(mapStateToProps)(AuditionItem);

从“React”导入React；
从“react native”导入{样式表、文本、视图、图像、TouchableOpacity}；
从“@expo/vector icons”导入{Ionicons}；
从“力矩”中导入力矩；
从“/../style/colors”导入颜色；
从“/../App”导入{store}；
从“/../actions/creators”导入{addBookmark，removeBookmark}；
从'react redux'导入{connect}；
类AuditionItem扩展了React.Component{
_toggleBookmark=（试听ID，书签）=>{
如果（书签）
store.dispatch（removeBookmark（auditionId））；
其他的
store.dispatch（addBookmark（auditionId））；
}
render（）{
地点（'en'）；
让书签=（this.props.auditions.indexOf（this.props.auditionId）>-1）？真：假；
让roleString=String（this.props.role）；
如果（roleString.length>35）
roleString=roleString.子串（0,35）+“…”；
让projectString=String（“项目：（“+this.props.productionType+”）+this.props.Project）；
如果（projectString.length>35）
projectString=projectString.substring（0,35）+“…”；
让productionHouseString=String（“productionHouse:+this.props.productionHouse”）；
如果（productionHouseString.length>35）
productionHouseString=productionHouseString.substring（0,35）+“…”；
让iconName=`ios书签${bookmarked？'''''-outline'}`；
返回(
此.\u切换书签（this.props.auditionId，书签）}>
{roleString}
{projectString}
{productionHouseString}
开始：{Moment（字符串（this.props.auditionDate）.replace（'''，''）.replace（''，''）.format（'LLLL'）}
)
}
}
const styles=StyleSheet.create({
海选书签：{
弹性：1，
flexDirection:“行”，
backgroundColor:colors.auditionItemBackgroundColor，
边界半径：10，
差额：10，
填充：15，
},
书签：{
弹性：1，
paddingTop:5，
},
海选主义：{
弹性：8，
flexDirection:“列”，
backgroundColor:colors.auditionItemBackgroundColor，
},
角色：{color:colors.auditionemcolor，fontSize:20，fontwweight:“bold”}，
项目：{color:colors.mcolor}，
productionHouse:{color:colors.mcolor}，
海选日期：{color:colors.auditionemcolor}，
});
常量mapStateToProps=状态=>{
返回{
审核：状态、书签、试镜、，
}
}
导出默认连接（MapStateTops）（AuditionItem）；

以及父AuditionList.js的代码

import React from 'react';
import { Text, View, FlatList, ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import AuditionItem from './AuditionItem';
import Auditions from './../data/Auditions';
import { store } from './../App';

class AuditionsList extends React.Component {

    constructor(props) {
      super(props);
      this.state = { isLoading: true, data: []  }
    }

    componentDidMount() {
      this._refreshData();
    }

    componentDidUpdate(prevProps) {
      if((this.props.location !== prevProps.location) || (this.props.roleType !== prevProps.roleType))
        this._refreshData();
    }

    _onRefresh() {
      this.setState({ isLoading: true }, this._refreshData() );
    }

    _refreshData = () => {
        Auditions.fetchAuditions(this.props.productionType, this.props.location, this.props.roleType).then(auditions => {
          this.setState({ isLoading: false, data: this._addKeysToAuditions(auditions) });
        });
    }

    _addKeysToAuditions = auditions => {
      return auditions.map(audition => {
          return Object.assign(audition, { key: audition.Role});
      });
    }

    _renderItem = ({ item }) => {
      return (
        <AuditionItem
          auditionId={item.objectId}
          role={item.Role}
          project={item.Project.Name}
          productionType={item.Project.ProductionType.Type}
          auditionDate={JSON.stringify(item.Date.iso)}
          productionHouse={item.Project.ProductionHouse.Name}
          auditions={store.getState().bookmarks.auditions}
        />
      );
    }

    render() {
      if (this.state.isLoading) {
        return (
          <View style={{flex: 1, paddingTop: 20}}>
            <ActivityIndicator />
          </View>
        );
      }

      return (
        <View style={{ flex: 1 }}>
          <FlatList onRefresh={() => this._onRefresh()} refreshing={this.state.isLoading} data={this.state.data} renderItem={this._renderItem} />
       </View>
      );
    }

}

const mapStateToProps = state => {
  return {
    location: state.settings.location,
    roleType: state.settings.roleType,
  };
}

export default connect(mapStateToProps)(AuditionsList);

从“React”导入React；
从“react native”导入{Text，View，FlatList，ActivityIndicator}；
从'react redux'导入{connect}；
从“/AuditionItem”导入AuditionItem；
从“/../data/Auditions”导入试听；
从“/../App”导入{store}；
类auditionList扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={isLoading:true，数据：[]}
}
componentDidMount（）{
这个._refreshData（）；
}
componentDidUpdate（prevProps）{
if（（this.props.location！==prevProps.location）| |（this.props.roleType！==prevProps.roleType））
这个._refreshData（）；
}
_onRefresh（）{
this.setState（{isLoading:true}，this._refreshData（））；
}
_刷新数据=（）=>{
海选。获取海选（this.props.productionType，this.props.location，this.props.roleType）。然后（海选=>{
this.setState（{isLoading:false，data:this.\u addkeystauditions（auditions）}）；
});
}
_AddKeysoundations=海选=>{
返回海选。地图（海选=>{
返回Object.assign（audition，{key:audition.Role}）；
});
}
_renderItem=（{item}）=>{
返回(
);
}
render（）{
if（此.state.isLoading）{
返回(
);
}
返回(
this.\u onRefresh（）}refreshing={this.state.isLoading}data={this.state.data}renderItem={this.\u renderItem}/>
);
}
}
常量mapStateToProps=状态=>{
返回{
位置：state.settings.location，
角色类型：state.settings.roleType，
};
}
导出默认连接（MapStateTops）（审核列表）；

App.js的代码：

import React from 'react';
import { Text, View, ActivityIndicator } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Header } from 'react-native-elements';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import { SettingsDividerShort, SettingsCategoryHeader, SettingsPicker} from 'react-native-settings-components';
import BookmarksScreen from './screens/BookmarksScreen';
import AuditionsScreen from './screens/AuditionsScreen';
import SettingsScreen from './screens/SettingsScreen';

import { AsyncStorage } from "react-native";
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import rootReducer from './reducers/index';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';
import { autoMergeLevel2 } from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const persistConfig = {
 key: 'root',
 storage: AsyncStorage,
 stateReconciler: autoMergeLevel2,
 whitelist: ['settings', 'bookmarks']
};

const pReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(pReducer);
export const persistor = persistStore(store);

const MaterialBottomTabNavigator = createMaterialBottomTabNavigator(
  {
    Bookmarks: BookmarksScreen,
    Auditions: AuditionsScreen,
    Settings: SettingsScreen,
  },
  {
    shifting: true,
    initialRouteName: 'Auditions',
    barStyle: {  backgroundColor: 'black' },
  }
);

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={<ActivityIndicator />} persistor={persistor}>
          <MaterialBottomTabNavigator />
        </PersistGate>
      </Provider>
    )
  }
}

从“React”导入React；
从“react native”导入{Text，View，ActivityIndicator}；
从“@expo/vector icons”导入{Ionicons}；
从“react native elements”导入{Header}；
从“反应导航材料底部选项卡”导入{createMaterialBottomTabNavigator}；
从“react native settings components”导入{SettingsDividerShort、SettingsCategoryHeader、SettingsPicker}；
从“/screens/bookmarkscreen”导入bookmarkscreen；
从“/screens/AuditionScreen”导入AuditionScreen；
从“/screens/SettingsScreen”导入设置屏幕；
从“react native”导入{AsyncStorage}；
从“redux”导入{createStore}；
从“redux persist”导入{persistStore，persistReducer}；
从“redux persist/lib/storage”导入存储；
从“./reducers/index”导入rootReducer；
从'react redux'导入{Provider}；
从'redux persist/lib/integration/react'导入{PersistGate}；
从'redux persist/lib/stateconciler/autoMergeLevel2'导入{autoMergeLevel2}；
常量persistConfig={
键：'根'，
存储：异步存储，
状态调节器：autoMergeLevel2，
白名单：[“设置”、“书签”]
};
const pReducer=persist
export default connect(mapStateToProps)(AuditionItem)