如何解决无法使Redux mapStateToProps在四个组件中的一个上工作
我使用React Redux Saga,并且有3个组件在Sage派发到我的mapStatetoProps
时收到reducer
正常。即使我在组件的Component
中放置一个断点console.log,第四个render()
也不会触发render()
:
const mapStatetoProps = state => {
return { articles: state.rootReducer.remoteArticles };
};
,可以看到上面的Store
remoteArticles
拥有数据。
我拍了40秒的电影,说明发生了什么
https://drive.google.com/file/d/1_QuKQd0YGbMuxrQ-qeQbF5mwlWLk0lly/view
不会触发Component
的{{1}} SliderWrapper.js的完整代码
render()
使用“ SliderWrapper”的/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/jsx-props-no-spreading */
import Slider from 'react-slick';
import { connect } from 'react-redux';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import React from 'react';
// import Resume from '../../resume.json';
import albums from '../../albumData.json';
const la = require('lodash');
class SliderWrapper extends React.Component {
shouldComponentUpdate(nextProps) {
// certain condition here,perhaps comparison between this.props and nextProps
// and if you want to update slider on setState in parent of this,return true,otherwise return false
const { updateCount } = nextProps;
const { updateCounter } = this.props;
if (updateCounter !== updateCount) {
return false;
}
// console.log("shouldComponentUpdate");
return true;
}
sliders() {
const { articles } = this.props;
if (articles.length === 0) return null;
return articles.weeks.map(week => {
let photo = la.find(albums,{ weekNumber: week.weekNumber });
photo = encodeURIComponent(`${process.env.PUBLIC_URL}/images/weeks/${week.weekNumber}/${photo.coverImage}`);
const { onImageClick } = this.props;
return (
// Timeline items
<section className="timeline-carousel" key={week.weekNumber}>
<h1>week {week.weekNumber}</h1>
<div className="timeline-carousel__item-wrapper" data-js="timeline-carousel">
<div className="timeline-carousel__item">
<div className="timeline-carousel__image">
<img onClick={() => onImageClick(week.weekNumber)} alt="CoverImage" src={photo} />
<h2>UNDER CONSTRUCTION IN PROGRES..</h2>
</div>
<div className="timeline-carousel__item-inner">
<div className="pointer" />
<span className="year">{week.year}</span>
<span className="month">{week.albumDate}</span>
<p>{week.summary}</p>
<a href="#/" className="read-more">
Read more,Dev should go to read more
</a>
</div>
</div>
</div>
</section>
);
});
}
render() {
const { afterChanged } = this.props;
const { beforeChanged } = this.props;
const settings = {
dots: false,arrows: false,autoplay: false,infinite: true,lazyLoad: false,swipetoSlide: true,centerMode: false,focusOnSelect: false,className: 'center',slidesToShow: 4,afterChange: afterChanged,beforeChange: beforeChanged,responsive: [
{
breakpoint: 1024,settings: {
slidesToShow: 3,slidesToScroll: 3,infinite: false,},{
breakpoint: 600,settings: {
slidesToShow: 2,slidesToScroll: 2,initialSlide: 2,{
breakpoint: 480,settings: {
slidesToShow: 1,slidesToScroll: 1,],};
return (
<div>
<Slider
ref={slider => {
this.slider = slider;
}}
{...settings}
>
{this.sliders()}
</Slider>
</div>
);
}
}
const mapStatetoProps = state => {
return { articles: state.rootReducer.remoteArticles };
};
const Aaa = connect(mapStatetoProps,null)(SliderWrapper);
export default Aaa;
Timeline.js的完整代码
Component
解决方法
您已经实现了shouldComponentUpdate。这样-仅当某些条件发生变化时,您的组件才会重新渲染。尝试删除此功能,看看是否适合您。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。