React Native中FlatList如何按列渲染商品对应卖家响应数据

问题根因 #

• 你定义的sample数组里的每个对象重复使用sellerId作为键，JavaScript对象中相同键名会被后面的赋值覆盖，所以每个对象最终仅保留最后一个sellerId的值，无法存储多个卖家ID
• 渲染逻辑中没有对卖家列表做遍历，仅渲染了单个卖家的信息
• 卖家响应表头的渲染逻辑没有做全局只渲染一次的判断

修复方案 #

第一步：修正数据源结构 #

将原来的单个sellerId字段改为数组格式sellerIds，存储对应买家关联的所有卖家ID：

const sample = [
  {id: 1, buyerId: 1, name: 'sohil', sellerIds: [1, 2]},
  {id: 2, buyerId: 2, name: 'sohil', sellerIds: [1, 2, 3, 4]},
  {id: 3, buyerId: 3, name: 'sohil', sellerIds: [1, 2]},
  {id: 4, buyerId: 4, name: 'sohil', sellerIds: [1, 2]},
  {id: 5, buyerId: 5, name: 'sohil', sellerIds: [1, 2, 3, 4, 5, 6]},
  {id: 6, buyerId: 6, name: 'sohil', sellerIds: [1]},
];

第二步：调整渲染逻辑 #

• 卖家表头提到FlatList外部，全局仅渲染一次
• 每行内部遍历当前买家的sellerIds数组，渲染所有对应卖家的信息
• 调整布局对齐产品信息列

完整修复后代码 #

import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  Button,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  StatusBar,
  FlatList,
} from 'react-native';


const sample = [
  {id: 1, buyerId: 1, name: 'sohil', sellerIds: [1, 2]},
  {id: 2, buyerId: 2, name: 'sohil', sellerIds: [1, 2, 3, 4]},
  {id: 3, buyerId: 3, name: 'sohil', sellerIds: [1, 2]},
  {id: 4, buyerId: 4, name: 'sohil', sellerIds: [1, 2]},
  {id: 5, buyerId: 5, name: 'sohil', sellerIds: [1, 2, 3, 4, 5, 6]},
  {id: 6, buyerId: 6, name: 'sohil', sellerIds: [1]},
];

const RFQnotificationBuyer = (props, {navigation}) => {
  const [DataForEnquiry, setDataForEnquiry] = useState(sample);

  const itemView = ({item}) => {
    return (
      <View style={styles.inputsContainer}>
        <View style={{flexDirection: 'row'}}>
          {/* 左侧ProductInfo列 */}
          <View style={{marginTop: '2%'}}>
            <View
              style={{
                width: 100,
                height: 50,
                justifyContent: 'center',
                backgroundColor: '#f3f3f3',
                alignItems: 'center',
              }}>
              <Text>Mobile</Text>
            </View>
            <View style={{flexDirection: 'row', marginTop: '1%'}}>
              <View
                style={{
                  width: 50,
                  height: 50,
                  justifyContent: 'center',
                  backgroundColor: '#f3f3f3',
                  alignItems: 'center',
                }}>
                <Text>IOS</Text>
              </View>
              <View style={{marginLeft: 1}}>
                <View
                  style={{
                    width: 50,
                    height: 50,
                    justifyContent: 'center',
                    backgroundColor: '#f3f3f3',
                    alignItems: 'center',
                  }}>
                  <Text>100</Text>
                </View>
              </View>
            </View>
          </View>

          {/* 右侧卖家信息，遍历所有卖家ID */}
          <ScrollView horizontal>
            {item.sellerIds?.length > 0 && item.sellerIds.map(sellerId => (
              <View key={sellerId} style={{marginLeft: 10, width: 60}}>
                <View
                  style={{
                    width: 60,
                    height: 50,
                    justifyContent: 'center',
                    backgroundColor: '#f3f3f3',
                    alignItems: 'center',
                    marginTop: 56 // 对齐左侧产品信息的高度，跳过表头区域
                  }}>
                  <Text>{sellerId}</Text>
                </View>
              </View>
            ))}
          </ScrollView>
        </View>
      </View>
    );
  };


  return (
    <View style={{flex: 1, backgroundColor: '#ffffff'}}>
      <StatusBar backgroundColor="#e71013" barStyle="light-content" />
      <View style={styles.container}>
        {/* 全局表头，只渲染一次 */}
        <View style={{flexDirection: 'row'}}>
          <View style={{width: 102}} /> {/* 占位对齐左侧ProductInfo列 */}
          <ScrollView horizontal>
            {Array.from({length: 6}, (_, i) => i + 1).map(sellerId => (
              <View key={sellerId} style={{marginLeft: 10, width: 60}}>
                <Text>Seller Profile</Text>
                <Text>View Remark</Text>
                <Text>Unit/Price</Text>
              </View>
            ))}
          </ScrollView>
        </View>
        <View style={{height: 550}}>
          <FlatList
            data={DataForEnquiry}
            renderItem={itemView}
            showsVerticalScrollIndicator={false}
            keyExtractor={(item, index) => index.toString()}
          />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
  inputsContainer: {
    marginVertical: 8
  }
});

export default RFQnotificationBuyer;

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