javascript - 在 React 中渲染最多 X 个元素

Question

我有一个相当大的 json 文件，其中包含 50 万条记录，我希望用户能够过滤它以找到他们想要的内容。然而，渲染250000<li>对于大多数人来说这是不可能的。

有什么方法可以强制 React 仅渲染最多 50 个元素。

目前我是这样渲染的:

   const dataList = data.filter(data => {
       return data.A.toLowerCase().indexOf(filterText.toLowerCase()) !== -1;
   }).map(data => {
       return(
        <li className="list-group-item" key={uuid()} >{data.A}</li>
       )
   })

Answer 1

当您进行过滤时，您可以执行 slice在过滤器之后:

return data.filter(/*...*/).slice(0, 50).map(/*...*/);

第一个参数是从哪里开始，第二个参数是从哪里停止。您可以创建这些变量，以便用户可以翻阅记录。

return data.filter(/*...*/).slice(from, to).map(/*...*/);

但是，这意味着您要过滤所有元素，即使您已经拥有要显示的 50 个元素。相反，当您拥有所需的元素时，我们可能想停止；如果我们打破了流范例，我们也可以折叠map:

const dataList = [];
let skip = from;
const max = to - from;
const filterLowerCase = filterText.toLowerCase(); // Do this *once*
data.some(function(entry) {
    if (entry.A.toLowerCase().indexOf(filterLowerCase) !== -1) {
        if (skip > 0) {
            --skip;
        } else {
            dataList.push(<li className="list-group-item" key={uuid()} >{entry.A}</li>);
            if (dataList.length == max) {
                return true; // Stop `some`, we have enough
            }
        }
    }
    return false;
});