0

私は React Redux Saga を使用しておりmapStateToProps、Sage が にディスパッチされたときに OKを受け取る 3 つのコンポーネントがありますreducer。コンポーネントにブレークポイント console.log を配置しても、 4 番目は起動Componentしません。render()render()

const mapStateToProps = state => {
    return { articles: state.rootReducer.remoteArticles };
};

上記にデータがあることがわかりStore remoteArticlesます。

何が起こっているかを示す 40 秒の動画を作成しました。

  • デバッグを開始
  • 空の記事で mapStateToProps が壊れる
  • 佐賀発送時の減速機折れ
  • データを保持する記事で mapStateToProps が再び壊れる
  • 次にrender()呼び出す必要がありますが、そうではありません..

https://drive.google.com/file/d/1_QuKQd0YGbMuxrQ-qeQbF5mwlWLk0lly/view

Component起動しない SliderWrapper.jsの完全なコードrender()

/* 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;

Component`SliderWrapper を使用する Timeline.jsの完全なコード

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import React from 'react';
import SliderWrapper from './SliderWrapper';

class Timeline extends React.Component {
    constructor(props) {
        super(props);
        this.changeHandler = this.changeHandler.bind(this);
        this.changeSlider = this.changeSlider.bind(this);
        this.state = {
            slideIndex: 1,
            updateCount: 0,
        };
    }

    onImageClick = val => {
        const { onChangeAlbum } = this.props;
        onChangeAlbum(val);
    };

    onChangeUpdateCount() {
        this.changeUpdateCount.bind(this);
    }

    changeUpdateCount() {
        const { updateCount } = this.state;
        this.setState(
            {
                updateCount: updateCount + 1,
            },
            // () => console.log(`test state after update: ${updateCount}`),
        );
    }

    changeSlider() {
        this.setState({
            slideIndex: this.sliderWrapper.slider.innerSlider.state.currentSlide,
        });
        // const { onChangeAlbum } = this.props;
        // onChangeAlbum(this.sliderWrapper.slider.innerSlider.state.currentSlide);
    }

    changeHandler(e) {
        this.sliderWrapper.slider.slickGoTo(e.target.value);
    }

    render() {
        const { slideIndex } = this.state;
        const { updateCount } = this.state;

        return (
            <section className="hero is-dark  has-bg-image">
                <div className="c" id="timeline">
                    <p>Your at Album: {slideIndex} </p>
                    <input onChange={this.changeHandler} value={slideIndex} type="range" min={0} max={50} />
                    <SliderWrapper
                        onImageClick={this.onImageClick}
                        ref={sliderWrapper => {
                            this.sliderWrapper = sliderWrapper;
                        }}
                        beforeChanged={this.changeUpdateCount.bind(this)}
                        afterChanged={this.changeSlider.bind(this)}
                        slideIndex={slideIndex}
                        updateCounter={updateCount}
                    />
                </div>
            </section>
        );
    }
}

export default Timeline;
4

1 に答える 1

2

shouldComponentUpdate を実装しました。そうすることで、特定の条件が変化した場合にのみ、コンポーネントが再レンダリングされなくなります。この機能を削除してみて、それが機能するかどうかを確認してください。

于 2020-08-30T09:13:35.567 に答える