React Native FlatList不保留列表单项选中状态的问题求助

你遇到的问题本质是每个EachQuestionItem组件把选中状态存在自己的局部state里，而FlatList为了优化性能，会自动卸载超出可视区域的组件。当你滚动回已答题目时，组件会重新渲染，局部state被重置为初始值，所以显示未作答。

直接把initialNumToRender设为200会一次性渲染所有题目，内存占用暴增，自然导致渲染慢、点击响应延迟，这根本不是合理的解决思路。

把所有题目的选中状态统一放在FlatList所在的父组件里管理，让EachQuestionItem变成受控组件，完全由父组件传递的props控制选中状态。

1. 父组件维护全局答题状态 #

用一个对象存储每个题目的选中选项，key是题目编号，value是选中的选项ID（1/2/3/4）：

// 父组件的状态，存储所有题目的答案
const [answers, setAnswers] = useState({});

2. 给EachQuestionItem传递状态和更新回调 #

修改FlatList的renderItem，把对应题目的选中值和更新方法传进去：

<FlatList
  data={data}
  ref={flatListRef}
  initialNumToRender={25}
  maxToRenderPerBatch={10}
  ListHeaderComponent={<HeaderComponent time_array={time_array} />}
  renderItem={({ item }) => (
    <EachQuestionItem
      question_number={item.key}
      question={item.question}
      option_one={item.option_one}
      option_two={item.option_two}
      option_three={item.option_three}
      option_four={item.option_four}
      correct_option={item.correct_option}
      // 传递当前题的选中值
      selectedId={answers[item.key]}
      // 传递更新选中状态的回调
      onSelectOption={(optionId) => {
        setAnswers(prev => ({
          ...prev,
          [item.key]: optionId
        }));
      }}
    />
  )}
  keyExtractor={item => item.key}
/>

3. 改造EachQuestionItem为受控组件 #

删掉组件内部的selectedId局部状态，改用父组件传过来的props：

// 移除原来的局部state
// const [selectedId, setSelectedId] = useState();

const EachQuestionItem = ({
  question_number,
  question,
  option_one,
  option_two,
  option_three,
  option_four,
  correct_option,
  selectedId,
  onSelectOption
}) => {
  // 这里保留你的其他逻辑，比如生成radioButtons的代码

  return (
    <RadioGroup 
      radioButtons={radioButtons} 
      onPress={onSelectOption} // 调用父组件的更新回调
      containerStyle={styles.optionContainer}
      labelStyle={{
        ...styles.optionText,
        color: colorScheme === 'dark' ? '#fafafa90' : '#00000090'
      }}
      selectedId={selectedId} // 使用父组件传递的选中值
    />
  );
};

额外优化小技巧 #

• 如果需要退出APP后保留答题进度，可以把answers存在AsyncStorage里，组件初始化时读取出来。
• 用useCallback包裹父组件的更新回调，避免每次渲染renderItem都创建新函数，提升FlatList性能：

const handleSelectOption = useCallback((questionKey, optionId) => {
  setAnswers(prev => ({
    ...prev,
    [questionKey]: optionId
  }));
}, []);

// 在renderItem里这样用
onSelectOption={(optionId) => handleSelectOption(item.key, optionId)}

这样改完之后，所有题目的选中状态都存在父组件的answers里，不管FlatList怎么复用、卸载组件，只要从answers里取对应题目的值，就能正确显示已选状态，同时还能保持FlatList的性能优化设置，不会出现渲染慢的问题。

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