React Native嵌套ScrollView中id变量作用域丢失问题求助

我在React Native中嵌套两个ScrollView实现类聊天界面，展示消息及其关联回复。原本功能正常，现在出现作用域问题，相关代码如下：

<ScrollView automaticallyAdjustContentInsets={false}>
          {feedlist &&
            feedlist
              .sort((a, b) => (Number(a.date) > Number(b.date)? 1 : -1))
              .map(({ date, message, id }, index) => (
                <View
                  key={index}
                  style={{
                    backgroundColor: "rgb(245,245,245)",
                    marginVertical: 5,
                    ...
                  }}
                >
                  ...
              ))}
          <ScrollView>
            {replyset &&
              replyset
                .sort((a, b) => (Number(a.date) > Number(b.date)? 1 : -1))
                .filter((item) => item.id === id)
                .map((item, index) => (
                  ...
                ))}
          </ScrollView>
</ScrollView>

当前问题：第二个ScrollView中用于筛选回复的id变量丢失作用域。若将筛选逻辑移至外层map函数，会导致数据重复混乱。预期效果为每条主消息下方显示对应id的回复列表：

解决方案 #

1. 修复作用域问题：将回复ScrollView移入主消息Item内部 #

核心问题是内层ScrollView不在外层map的作用域中，无法获取每条主消息的id。只需将回复的ScrollView放到外层map生成的每个主消息View内部，即可直接访问当前item的id：

<ScrollView automaticallyAdjustContentInsets={false}>
  {feedlist &&
    feedlist
      .sort((a, b) => (Number(a.date) > Number(b.date) ? 1 : -1))
      .map(({ date, message, id }, index) => (
        <View
          key={index}
          style={{
            backgroundColor: "rgb(245,245,245)",
            marginVertical: 5,
            // 保留原样式
          }}
        >
          {/* 渲染主消息内容 */}
          <Text>{message}</Text>
          <Text style={{ fontSize: 12, color: '#666' }}>
            {new Date(Number(date)).toLocaleString()}
          </Text>

          {/* 回复列表：移入主消息View内，获取当前id */}
          <ScrollView 
            style={{ 
              marginLeft: 20, 
              maxHeight: 150, // 设置最大高度，避免回复过多影响主滚动
              marginTop: 8 
            }}
          >
            {replyset &&
              replyset
                .filter(item => item.id === id)
                .sort((a, b) => (Number(a.date) > Number(b.date) ? 1 : -1))
                .map((item, replyIndex) => (
                  <View 
                    key={replyIndex} 
                    style={{ 
                      marginVertical: 4, 
                      padding: 6, 
                      backgroundColor: '#fff',
                      borderRadius: 4
                    }}
                  >
                    <Text>{item.message}</Text>
                    <Text style={{ fontSize: 10, color: '#999', marginTop: 2 }}>
                      {new Date(Number(item.date)).toLocaleString()}
                    </Text>
                  </View>
                ))}
          </ScrollView>
        </View>
      ))}
</ScrollView>

2. 性能优化：提前处理数据，避免重复计算 #

不要在render阶段执行sort和filter（每次渲染都会重复计算），建议在组件初始化或数据更新时提前处理：

// 函数组件示例，使用useMemo缓存处理后的数据
import { useMemo } from 'react';

// ...
const processedFeedlist = useMemo(() => {
  return feedlist?.sort((a, b) => Number(a.date) - Number(b.date)) || [];
}, [feedlist]);

const replyMap = useMemo(() => {
  if (!replyset) return {};
  return replyset.reduce((map, item) => {
    // 为每个id的回复提前排序
    const sortedReplies = [...(map[item.id] || []), item].sort((a, b) => Number(a.date) - Number(b.date));
    map[item.id] = sortedReplies;
    return map;
  }, {});
}, [replyset]);
// ...

// 渲染时直接使用处理后的数据
<ScrollView automaticallyAdjustContentInsets={false}>
  {processedFeedlist.map(({ date, message, id }, index) => (
    <View key={index} style={/* 原样式 */}>
      {/* 主消息内容 */}
      {/* 回复列表 */}
      <ScrollView style={/* 原样式 */}>
        {replyMap[id]?.map((item, replyIndex) => (
          <View key={replyIndex} style={/* 回复样式 */}>
            {/* 回复内容 */}
          </View>
        ))}
      </ScrollView>
    </View>
  ))}
</ScrollView>

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