React Loadable 不会在浏览器刷新时更新

Question

我有一张幻灯片，可以呈现一堆带有一些信息的卡片。卡片高度以最高卡片的高度为基础。我正在使用react-slick我的滑块。在第一次渲染时，卡片都设置为一个高度，但是当我刷新浏览器时，卡片的高度不同。

我的代码如下

滑块.jsx

import Loadable from 'react-loadable';
.....


const Slider = Loadable({
    loader: () => import('react-slick'),
    loading: () => null,
  });

class Slider extends Component{
   constructor(){
     this.state={ height: 0 }
     this.cards = [];
   }

   componentDidMount(){
      const height = this.getHighestHeight(this.cards);
      this.setState({height});
   }

   getHighestHeight(cards){
    //calculates the highest height of the cards
    ......
   }

   render(){
     ...
     <Slider ...>
       <Cards height={this.state.height} />
     </Slider>
     ....
   }

}

我知道 Loadable 是异步组件，这可能是它没有在浏览器刷新时设置高度的原因

Answer 1

您可能正在测试尚无高度的图像的高度。componentDidMount() 表示组件已呈现，如<img .. />标签中所示已呈现但不一定已加载。在您的 getHighestHeight fx 中，尝试检查它是否已加载，然后测试其高度。