react-native-select-multiple保存所选项目

Question

我正在使用react-native-select-multiple，但是在正确保存所选项目（也就是选中的项目）时遇到了问题。

我有一个显示可检查项目列表的屏幕，但是该项目列表会根据您在上一个屏幕（父屏幕）中选择的内容而变化。

例如，当我在“周1”中选中一个框时，它将在所有其他“周”屏幕中选中同一框。在我的代码中，我为每个“周”屏幕使用相同的文件，但是根据用户是否单击“周1”，“周2”等来显示不同的数据库。

我当前正在将所选项目（“选择多个”的AKA onSelectionsChange属性）存储在父屏幕的父级中，因此它保持不变。我觉得我应该以稍微不同的方式存储它，但是我不知道该怎么做！如果您有任何想法请告诉我！

下面是我的代码的屏幕截图和摘要：

父屏幕： Parent Screen, Weekly Views

子屏幕-在父屏幕中单击第1周和第2周后显示：

Child Screen - Week 1

Child screen - Week 2

父代码：

const lists = [
  {
    week: 'Week 1',
  },
  {
    week: 'Week 2',
  },
  {
    week: 'Week 3',
  },
  {
    week: 'Week 4',
  },
  {
    week: 'Week 5',
  },
  {
    week: 'Week 6',
  },
  {
    week: 'Week 7',
  },
  {
    week: 'Week 8',
  },
  {
    week: 'Week 9',
  },
  {
    week: 'Week 10',
  },
]

export default class WeeklyListView extends React.Component{

  constructor(){
    super();
    this.state = {
      test:{}
    }
  }

  clickMe = (list) => {
    console.log('list', list)
      this.props.navigation.navigate('Challenges', {week: list});
    };


  triggerSettingsUpdate = () => {
    this.props.navigation.openDrawer();
  }

  render(){
    return(
      <View style={styles.container}>
        <ComponentStatusBar/>
        <View style={styles.menuComponent}>
        <Text style={styles.titleText}>
          Season 7 Challenges
        </Text>

        <MenuButton
          triggerSettingsUpdate={this.triggerSettingsUpdate}/>

        </View>
        <View style={styles.listComponentStyle}>
        <ScrollView style={{flex: 1}}>

    {
      lists.map((list, i) => (
        <ListItem
          key={i}
          containerStyle={styles.listContainerStyle}
          contentContainerStyle={styles.rowStyle}
          title={list.week}
          titleStyle={styles.listStyle}
          onPress={() => this.clickMe(list)}
          chevron={{
            color: 'white',
            size: 40
          }}
        />
      ))
    }
    </ScrollView>
      </View>
    </View>
    )
  }
}

子代码

const renderLabel = (label, style) => {
  return (
    <View style={styles.rowview}>
        <Text style={styles.text}>{label}</Text>
    </View>
  )
}

export default class Challenges extends React.Component{

  constructor(props){
    super(props);
    console.log("I'm the selector screen and these are my props", this.props)


    this.state = {
      challengeDisplay: [],
      displayWeek: 'Week'
    }

   // const { navigation } = this.props;
   // const itemId = navigation.getParam('itemId', 'NO-ID');
   // const otherParam = navigation.getParam('otherParam', 'some default value');


  }

  triggerSettingsUpdate = () => {
    this.props.navigation.navigate('Home');
  }



  componentDidMount(){
    const { navigation } = this.props;
    this.listreceived = navigation.getParam('week', 'error')
    console.log('this.listreceived', this.listreceived.week)
    this.setState({displayWeek: this.listreceived.week})
    this.weekSelect()
    console.log('challengesData', challengesData)
  }



weekSelect() {
  switch(this.listreceived.week ){
    case"Week 1":
      this.setState({challengeDisplay:challengesDataArray[0].week1})
      break;
    case"Week 2":
      this.setState({challengeDisplay:challengesDataArray[0].week2})
      break;
    case"Week 3":
      this.setState({challengeDisplay:challengesData3})
      break;
    case"Week 4":
      this.setState({challengeDisplay:challengesData4})
      break;
    case"Week 5":
      this.setState({challengeDisplay:challengesData5})
      break;
    default:
      this.setState({challengeDisplay:challengesData610})
  }
}




  render(props) {
    return (
        <View style={styles.container}>
        <ComponentStatusBar/>
      <View style={styles.selectorComponent}>


          <View style={styles.menuComponent}>
          <Text style={styles.titleText}>
            {this.state.displayWeek}
          </Text>

          <MenuButton
            triggerSettingsUpdate={this.triggerSettingsUpdate}/>

          </View>

        <View style={styles.listcomponent}>
          <SelectMultiple
              style={styles.list}
              rowStyle={{
                backgroundColor: null,
                borderBottomWidth: 1,
                borderBottomColor: 'white',
                maxWidth: (Dimensions.get('window').width)*0.9,
                padding: 15,
                right: -10
              }}
              listViewProps= {{
               showsVerticalScrollIndicator: false,
               contentInset: {bottom: 34}
              }}
              checkboxSource={require("../Appimages/uncheckedBox.png")}
              selectedCheckboxSource={require('../Appimages/checkedBox.png')}
              items={this.state.challengeDisplay}
              renderLabel={renderLabel}
              selectedItems={this.props.screenProps.weeklyChallengesStore}
              onSelectionsChange={this.props.screenProps.weeklyChallenges} />
        </View>

      </View>

      </View>
    );
  }
}