Question

我希望显示ReactNative中分为几部分的项目列表

从数据库以平面数组的形式接收数据，并为每个项目提供密钥-例如：

[{'key':'movie','name':'ToyStory1'},
 {'key':'movie','name':'ToyStory2'},
 {'key':'tv','name':'X-Files'},
 {'key':'tv','name':'Big bang theory'}]

我想留在平面阵列上。

到目前为止，我发现的所有解决方案都适用于此类数据：

[{'key':'movie, 'data':[{'name':'ToyStory1'},{'name':'ToyStory2'}]},
 {'key':'tv, 'data':[{'name':'X-Files'},{'name':'Big bang theory'}]}
]

有什么想法吗？

Answer 1

您可以映射数据，并在适当的位置插入“标题”对象。

const data = [
  { 'key': 'movie', 'name': 'ToyStory1' },
  { 'key': 'movie', 'name': 'ToyStory2' },
  { 'key': 'tv', 'name': 'X-Files' },
  { 'key': 'tv', 'name': 'Big bang theory' }
];

// preprocess data to insert header objects
const dataWithHeadersInserted = data => data.reduce((res, item) => {
  if (item.key !== res.header) {
    res.header = item.key;
    res.data.push({ header: res.header });
  }
  res.data.push(item);
  return res;
}, {
  header: null,
  data: [],
}).data;

const processedData = dataWithHeadersInserted(data);

console.log(processedData);

// later map over preprocessed data and render correct component
// here in React you would use map and return components 
// instead of forEach and console.log
processedData.forEach(item => {
  if (item.header) {
    console.log('====== Header', item.header, '======');
  } else {
    console.log(item.name);
  }
});

如果您不需要预处理数据，也可以随时进行处理：

const data = [
  { 'key': 'movie', 'name': 'ToyStory1' },
  { 'key': 'movie', 'name': 'ToyStory2' },
  { 'key': 'tv', 'name': 'X-Files' },
  { 'key': 'tv', 'name': 'Big bang theory' }
];
     
const dataWithHeadersOnFly = data => {
  let header = null;

  // In react this would be a map instead
  return data.forEach(item => {
    if (item.key !== header) {
      header = item.key;
      
      // In react you would return a Fragment with header and item components
      console.log('====== Header', header, '======');
      console.log(item.name);
      return;
    }

    // In react you would just return item component
    console.log(item.name);
  });
};

dataWithHeadersOnFly(data);

const DataWithHeadersOnFly = ({data, renderSectionHeader, renderItem}) => {
  return data.map((item, index, dataArr) => (
    <Fragment>
      {(!dataArr[index - 1] || dataArr[index - 1].key !== item.key) && 
        renderSectionHeader({ header: item.key, index })}
      {renderItem({ item, index })}
    </Fragment>
  ));
};

...

render() {
  return (
    <DataWithHeadersOnFly
      data={data}
      renderSectionHeader={({ header, index }) => (
        <h3 key={`header-${header}-${index}`}>
          ====== {header} ======
        </h3>
      )}
      renderItem={({ item, index }) => (
        <div key={`${item.name}-${index}`}>{item.name}</div>
      )}
    />
  );
}

Answer 2

您可以像这样创建一个函数来返回过滤的对象数组

function filteredData(recievedData, key)
    { 
       var dataperKey = recievedData.filter(function (el) {
        return el.key == key
      });
      return dataperKey;
    }

此函数将根据您传递的键返回过滤后的数组，例如，如果您将 movie 作为 key 传递，则输出将是

[{'key':'movie','name':'ToyStory1'},
 {'key':'movie','name':'ToyStory2'}]

现在为`SectionList

创建您的部分数据

sections={[{'key':'movie, 'data':filteredData(recievedData,'movie')},
 {'key':'tv, 'data':filteredData(recievedData,'tv')}
]}

React-Native-按键列出部分

2 个答案: