如何将父Flatlist索引传递给子Flatlist函数并通过setState修改状态

我来帮你搞定这个问题！核心就是要把父FlatList里当前问题的索引传递给子FlatList的点击事件，这样就能精准定位到要修改的问题项。下面是具体的实现步骤和修改后的代码：

关键思路拆解 #

• 在父FlatList的_renderItem方法中，把当前问题的索引（我称之为parentIndex）传递给子FlatList的renderItem函数
• 修改子FlatList的_renderItemOptions方法，接收这个父索引参数，并在点击时把它传给checkBoxSelection
• 更新checkBoxSelection函数，利用父索引定位到对应的问题，同时遵循React不可直接修改state的原则，做正确的状态更新

修改后的完整代码 #

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 = (parentIndex, childItem, childIndex) => {
  // 不可变更新state：先拷贝整个list数组
  const updatedList = [...this.state.list];
  // 拷贝当前问题的answers数组
  const updatedAnswers = [...updatedList[parentIndex].answers];
  
  // 这里实现单选逻辑：点击的选项设为true，其他设为false
  updatedAnswers.forEach((answer, idx) => {
    answer.radioButtonValue = idx === childIndex;
  });
  
  // 把更新后的answers放回对应问题项
  updatedList[parentIndex].answers = updatedAnswers;
  // 最终更新state
  this.setState({ list: updatedList });
  
  // 测试输出，确认状态修改成功
  console.log('当前选中状态:', updatedAnswers[childIndex].radioButtonValue);
}

_renderItem = ({ item, index: parentIndex }) => {
  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函数
        renderItem={({ item: childItem, index: childIndex }) => 
          this._renderItemOptions(childItem, childIndex, parentIndex)
        }
      />
    </View>
  )
}

// 修改后的子组件渲染函数，接收父索引参数
_renderItemOptions = (childItem, childIndex, parentIndex) => {
  return (
    <View>
      <View style={styles.yesNoRadioButtonView}>
        <TouchableOpacity 
          onPress={() => { 
            // 点击时把父索引、选项信息一起传给处理函数
            this.checkBoxSelection(parentIndex, childItem, childIndex) 
          }}
        >
          <View style={styles.yesChekboxView}>
            <Image 
              source={childItem.radioButtonValue ? AppImages.radioOn : AppImages.radioOff} 
              style={styles.radioButton} 
            />
            <Text style={styles.yesNoText}>
              {childItem.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>
  )
}

改动细节说明 #

1. 父索引传递：在父FlatList的_renderItem中，我们把当前问题的索引命名为parentIndex，然后通过匿名函数把这个参数传给子FlatList的renderItem函数，确保子组件能拿到父级的位置信息。
2. 子组件参数接收：_renderItemOptions现在新增了parentIndex参数，点击时就能把父索引、选项项和选项索引一起传给处理函数。
3. 正确更新状态：在checkBoxSelection中，我们没有直接修改原state，而是先拷贝数组再修改，最后通过setState更新，这是React中状态更新的标准做法，避免意外的状态突变。

这样修改后，你就能在点击选项时精准定位到对应的问题，正确修改state中的选项状态了。

内容的提问来源于stack exchange，提问作者raavan199