使用react-window List组件时出现Element type is invalid错误的解决求助

问题出在你传给List的子元素类型不符合要求——react-window的List组件需要的是一个渲染函数（就像官方示例里的Row那样），但你现在直接传入了renderUsers(users)执行后的结果，这是一个React元素数组（本质是对象数组），所以触发了类型错误。

正确的实现方式 #

我们需要把你的用户渲染逻辑改成符合react-window要求的渲染函数，它会接收index和style两个参数，然后根据索引获取对应的用户数据，返回对应的User组件：

1. 定义符合要求的渲染函数：

// 注意：这个函数接收react-window传入的index和style参数
const renderUserRow = ({ index, style }) => {
  const user = users[index];
  // 必须把style传给User组件的根元素，否则虚拟化定位会失效
  return <User user={user} key={user.__id} style={style} />;
};

2. 调整List组件的用法，直接传入这个函数（不要调用它）：

<List 
  className="List" 
  height={150} 
  itemCount={users.length} // 建议用users的长度，而不是硬写20
  itemSize={35} 
  width={300}
>
  {renderUserRow}
</List>

为什么要这么改？ #

react-window是虚拟化列表库，它不会一次性渲染所有用户元素，而是只会渲染当前可见区域内的元素，并且会根据滚动位置动态计算每个元素的位置（通过style参数传递）。所以它需要的是一个能根据index动态生成元素的函数，而不是提前生成好的元素数组——官方示例里的Row函数就是做这件事的：接收索引和样式，返回对应行。

额外注意事项 #

• 确保你的User组件把传入的style应用到根元素上，比如：

const User = ({ user, style }) => {
  return (
    <div style={style} className="user-item">
      {/* 用户内容 */}
      {user.name}
    </div>
  );
};

• itemCount最好和users数组的长度保持一致，避免出现索引越界的问题。

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