Как передать значение индекса родительского списка в функцию onPress дочернего списка?

Question

Как передать значение индекса родительского Flatlist в дочернюю функцию Flatlist, чтобы я мог использовать его в функции и изменить значение с помощью setState. Итак, как передать значение индекса родительского Flatlist в функцию дочернего Flatlist, чтобы я мог использовать его в функции и изменить значение с помощью setState.

Он начинается со списка со встроенным состоянием

constructor(props) {
  super(props);

  this.state = {
    list: [
      {
        question: 'il veicolo ha la gomma forata?',
        answers: [
          {
            radioButtonValue: false,
            text: strings.CONFIRMVIEW_yes,
          },
          {
            radioButtonValue: true,
            text: strings.CONFIRMVIEW_no,
          },
        ],
      },
    ]
  }
}

checkBoxSelection = (item, index) => {
  // if (item.radioButtonValue == index) {
  //     this.list.answers[index].radioButtonValue = true
  // }
  console.log(this.state.list[0].answers[index].radioButtonValue)
}

_renderItem = ({ item, index }) => {
  return (
    <View style={styles.cellView}>
      <Text style={styles.questionText}>
        {item.question.toUpperCase()}
      </Text>
      <FlatList
        data={item.answers}
        horizontal={true}
        showsHorizontalScrollIndicator={true}
        scrollEnabled={true}
        bounces={false}
        renderItem={this._renderItemOptions}
      />
      {/* <View style={styles.yesNoRadioButtonView}>
              <View style={styles.yesChekboxView}>
                  <TouchableOpacity onPress={ () => {console.log("TEST1"); this.checkBoxSelection()}  }>
                  <Image source={(item.answers == index) ? AppImages.radioOn : AppImages.radioOff} style={styles.radioButton} />
                  </TouchableOpacity>
                  <Text style={styles.yesNoText}>
                      {strings.CONFIRMVIEW_yes}
                  </Text>
              </View>
              <View style={styles.noRadioButtonView}>
                  <TouchableOpacity onPress={() => { this.checkBoxSelection.bind(this) }}>
                  <Image source={(item.answers == 0) ? AppImages.radioOn : AppImages.radioOff} style={styles.radioButton} />
                  </TouchableOpacity>
                  <Text style={styles.yesNoText}>
                      {strings.CONFIRMVIEW_no}
                  </Text>
              </View>
          </View> */}
    </View>
  )
}

_renderItemOptions = ({ item, index }) => {
  return (
    <View>
      <View style={styles.yesNoRadioButtonView}>
        <TouchableOpacity onPress={() => { this.checkBoxSelection(item, index) }}>
          <View style={styles.yesChekboxView}>
            <Image
              source={item.radioButtonValue ? AppImages.radioOn : AppImages.radioOff}
              style={styles.radioButton}
            />
            <Text style={styles.yesNoText}>
              {item.text}
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  )
}

render() {
  return (
    <Container>
      <Content style={styles.container}>
        <FlatList
          data={this.state.list}
          showsVerticalScrollIndicator={false}
          scrollEnabled={false}
          bounces={false}
          renderItem={this._renderItem}
        />
      </Content>
      <SafeAreaView>
        <TouchableOpacity
          style={[LayoutStyle.appBtn1]}
        >
          <Text style={[LayoutStyle.appBtnText1]}>
            {strings.DAMAGE_SURVEY_comeOn.toUpperCase()}
          </Text>
        </TouchableOpacity>
      </SafeAreaView>
    </Container>
  )
}

Answer 1

В функции renderItem родительского Flatlist замените

renderItem = { () => {this.renderItemOptions(item, index)}}

на

renderItem={(childData) => this._renderItemOptions(childData, index)}

, а затем в функции renderItemOption дочернего Flatlist необходимо получить parentIndex с другим именем.

_renderItemOptions = ({ item, index }, parentIndex) => {
        console.log("hello")
        return (
            <View>
                <View style={styles.yesNoRadioButtonView}>
                    <TouchableOpacity onPress={() => { this.checkBoxSelection(item, index, parentIndex) }}>
                        <View style={styles.yesChekboxView}>
                            <Image
                                source={item.radioButtonValue ? AppImages.radioOn : AppImages.radioOff}
                                style={styles.radioButton}
                            />
                            <Text style={styles.yesNoText}>
                                {item.text}
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

Answer 2

Попробуйте обновить свой объект renderItem в вашем FlatList, чтобы явно передать индекс

renderItem={({item, index}) => this._renderItemOptions(item, index)}