React 窗口如何迭代你的数据？

Posted 2023-02-21

【中文标题】React 窗口如何迭代你的数据？

【英文标题】：React window how to iterate your data?

【发布时间】：2021-11-11 09:17:55

【问题描述】：

import  FixedSizeList as List  from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
const TrackTable = ( tracks ) => 
    const Row = ( index, style ) => (
        <div
            className=index % 2 ? 'ListItemOdd' : 'ListItemEven'
            style=style>
            Row index
        </div>
    )
    const AllRows = () => 
        const arr = [
             code: '12H', id: '1' ,
             code: '4gf', id: '2' ,
        ]
        return arr.map((i, index) => 
            return <div key=index>i.code</div>
        )
    
    return (
        <AutoSizer>
            ( height, width ) => (
                <List
                    className="List"
                    height=height
                    itemCount=tracks.length
                    itemSize=35
                    width=width>
                    AllRows()
                </List>
            )
        </AutoSizer>
    )

如果我将Row 放在<List /> 中，就像作者的示例一样，它可以工作，

但是如果我将我的数据 AllRows 放入 <List />，我会收到错误 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.。我检查了我的数据是好的。那么我在这里做错了什么？

这里是沙盒： https://codesandbox.io/s/bvaughn-react-window-fixed-size-list-vertical-forked-jqmyx?file=/index.js

【问题讨论】：

你是如何实现 List 组件的？

是的。更新了代码

不完全是我的意思。列表组件中的某处可能有一行调用 props.children。您传递给 props.children 的参数将传递给 和

之间的函数

如果 List 或 FixedSizeList 不包含对 props.children 的调用，那么我对 facc 的看法是错误的，请参阅 Nokwiw 的回答。

在 AllRows 之后删除括号而不更改任何其他内容是否使其工作？

【参考方案1】：

你调用AllRows没有属性，在这种情况下tracks是undefined ==>你会得到错误tracks.map is not a function

为避免这种情况，请使用数组调用 AllRows：

        <List
            className="List"
            height=height
            itemCount=tracks.length
            itemSize=35
            width=width>
            AllRows(yourArray)
        </List>

编辑：

AllRows 定义如下，返回一个数组，在tracks.map 之前删除return：

const AllRows = () => 
        if (tracks.length == 0) return ''
        return tracks.map((i, index) => 
            return <div key=i.index>i.code</div>
        )
    

改用它：

const AllRows = () => 
        if (tracks.length == 0) return <></>
        tracks.map((i, index) => 
            return <div key=i.index>i.code</div>
        )
    

或者：

const AllRows = () => 
   if (tracks.length == 0) return <></>
   return (
   
    tracks.map((i, index) => 
            return <div key=i.index>i.code</div>
        )
   
          ) 
    

【讨论】：

我更新问题和代码

您是否使用有效数组调用了AllRows？

是的，我确实用有效的 arr 打电话

我只是简化了我的arr，里面有两个项目

我编辑了我的帖子

【参考方案2】：

以上答案的补充，你也可以使用这个：

const AllRows = () => 
    (tracks || []).map((i, index) => 
        return <div key=i.index>i.code</div>
    )

【参考方案3】：

这是工作示例。请检查

const arr = [
   code: "12H", id: "1" ,
   code: "4gf", id: "2" 
];
const AllRows = () => arr.map((i, index) => <div key=index>i.code</div>);

const Example = () => (
  <AutoSizer>
    ( height, width ) => (
      <List
        className="List"
        height=height
        itemCount=1000
        itemSize=35
        width=width
      >
        AllRows
      </List>
    )
  </AutoSizer>
);

【参考方案4】：

您提到的第一个错误是tracks.map 未定义。这表明 List 组件调用它的子组件。从文档中，第一个参数具有索引和样式变量。所以你可以使用：

// arr is defined up here
const AllRows = ( index, style ) => 
  return <div key=index>arr[index].code</div>;
;

或者作为使用闭包的更通用的方法：

const AllRows2 = (arr2) => 
  return ( index, style ) => 
    return <div key=index>arr2[index].code</div>;
  ;
;

然后在列表组件中使用 AllRows2(arr)。这可能不需要。 Here 是一个工作示例。