react-window 渲染空白，数据明明有却显示不出来？

A. 卿硕提问于 2026-03-01 23:46:20 阅读 4

优化

我用 react-window 的 FixedSizeList 渲染一个长列表，数据是从接口拿的，console.log 也能看到数组有内容，但页面就是一片空白，Item 组件根本没执行。

我试过把数据写死成静态数组，还是不行。是不是哪里配置错了？

const Row = ({ index, style }) => (
  <div style={style}>Item {index}</div>
);

const MyList = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    // 模拟接口数据
    setItems(Array.from({ length: 1000 }, (_, i) => <code>Item ${i}</code>));
  }, []);

  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={35}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
};

长列表优化

我来解答赞 2 收藏

反馈

2 条解答

迷人的瑞红 Lv1

哎呀，这个问题我之前也踩过坑！

问题出在 width="100%" 这里。react-window 的 width 属性需要的是具体的数值，百分比字符串它不认，所以宽度变成 0 了，自然什么都看不见。

最简单的改法是直接给个固定数值，比如 width={800}。

但如果你确实需要自适应宽度，就得配合 AutoSizer 组件来用，像这样：

import { FixedSizeList, AutoSizer } from 'react-window';



const MyList = () => {

  const [items, setItems] = useState([]);



  useEffect(() => {

    setItems(Array.from({ length: 1000 }, (_, i) => Item ${i}));

  }, []);



  return (

    

      

        {({ height, width }) => (

          
            height={height}

            width={width}

            itemCount={items.length}

            itemSize={35}

          >

            {Row}

          

        )}

      

    


  );

};

用 AutoSizer 的时候要注意，外层的父容器必须有明确的高度，不然 AutoSizer 也算不出尺寸来。我之前就在这卡了好久，明明代码都对，就是空白，最后发现是父容器高度塌陷了。

希望能帮到你！

2026-03-02 03:08

树鹤 ☘︎ Lv1

检查一下你的 Row 组件，react-window 的 render props 会传 data 参数，你漏了。用 itemData 把数据传进去：

const Row = ({ index, style, data }) => (

  {data[index]}


);



const MyList = () => {

  const [items, setItems] = useState([]);



  useEffect(() => {

    setItems(Array.from({ length: 1000 }, (_, i) => Item ${i}));

  }, []);



  return (

    
      height={600}

      itemCount={items.length}

      itemSize={35}

      width="100%"

      itemData={items}

    >

      {Row}

    

  );

};

FixedSizeList 不会自动读取外部变量，必须通过 itemData 显式传进去，Row 组件的第三个参数 data 就是你的 items 数组。

2026-03-02 00:01