React Native中在FlatList的return内加判断重置pass为0的方法

你当前的写法存在两个核心错误：

1. JSX的return()括号内部只能嵌套表达式，不能直接写if条件判断、变量赋值这类语句，所以你注释掉的重置逻辑本身就不符合JSX语法规范，直接放开注释会直接报语法错误。
2. 手动维护外部自增变量pass的方式本身不符合React和FlatList的渲染逻辑：FlatList是虚拟列表，会按需渲染、复用列表项，renderItem的调用时机、调用次数不受手动控制，外部变量很容易出现计数错乱、状态不同步的问题，也没法保证每次重渲染时准确重置为0。

你完全不需要手动维护pass这个计数变量：renderItem回调本身会自带当前渲染项的index参数，这个索引从0开始，和列表项一一对应，每次FlatList重渲染时都会自动从0开始重新计算，完全匹配你的需求。
直接使用回调自带的index替换手动维护的pass即可，代码如下：

<FlatList
  data={letter.description}
  numColumns={2}
  keyExtractor={(_, index) => index.toString()}
  renderItem={({ item, index }) => {
    return (
      <View>
        <Text
          style={{
            fontSize: 18,
            fontWeight: "600",
            marginTop: 25,
            width: "50%",
          }}
        >
          {letter.data[index]}
          {"\n"}
        </Text>
        <Text style={{ marginTop: 50, width: "50%" }}>
          {letter.description[index]}
          {"\n"}
        </Text>
      </View>
    );
  }}
/>

• 如果你确实有特殊场景需要手动维护计数变量，绝对不要把变量定义在组件作用域外，需要把变量重置逻辑写在renderItem的return语句之前（JSX括号外部），但这种方式在虚拟列表滚动复用时大概率会出现索引错乱，非必要不要使用。
• 由于你设置了numColumns={2}开启两列布局，如果你的预期是左右两列分别展示letter.data和letter.description的对应内容，建议先把两组数据合并为[{dataItem: xxx, descItem: xxx}]的结构再传入FlatList的data属性，避免布局和内容错位。

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