React-Redux:小道具が変更されてもコンポーネントは再レンダリングされませんでした

サチンバンダリ

小道具を変更しても、コンポーネントの再レンダリングに問題がありました。フォトアルバムの状態とその中の新しい写真のアップロードを処理するレデューサー(下)がありました。

    const profilePhotoReducer = (state={
    fetching: false,
    photos: [],
    dataSetChanged: false,
    uploading: false
},action)=>{
    console.log('reducer called: ', action.type);
    switch (action.type){
        case "PHOTOS_FETCHING":
            return{
                ...state,
                fetching: true
            };

        case "PHOTOS_FETCH_SUCCESS":
            return {
                ...state,
                fetching: false,
                photos: action.payload,
                dataSetChanged: false
            };

        case "PHOTOS_FETCH_FAILED":
            return {
                ...state,
                fetching: false,
                dataSetChanged: false
            };

        case "UPLOADING":
            return {
                ...state,
                uploading: true
            };

        case "UPLOAD_SUCCESS":
            return {
                ...state,
                dataSetChanged: true,
                uploading: false
            };

        case "UPLOAD_FAILED":
            return {
                ...state,
                uploading: false
            };

        default:
            return state;
    }
};

export default profilePhotoReducer;

写真のアップロードが成功した後、「UPLOAD_SUCCESS」action.typeが一致し、dataSetChanged(Boolean)が反転し、コンポーネント(以下)で次のように処理します。

    class ProfilePhotosComponent extends React.Component{
    componentDidMount(){
        console.log('********------***********: ', this.props.profilePhoto.dataSetChanged);
        if(this.props.profilePhoto.photos.length === 0 || this.props.profilePhoto.dataSetChanged){
            this.props.getPhotos();
        }
    }

    render(){

        const PhotoList = this.props.profilePhoto.photos.map((photo, i)=>{
            return (<PhotoComponent name={photo} key={i}/>);
        });

        return (
            <div className={'card pcard'}>
                <div className={'col-md-12'}>
                    <UploadPhotoForm handleUpload={this.props.handleUpload}/>
                    {PhotoList}
                </div>
            </div>
        );
    }
}

function mapStateToProps(state){
    return {
        profilePhoto: state.profilePhoto
    };
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({
        getPhotos,
        handleUpload
    },dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(ProfilePhotosComponent);
Shubham Khatri

重要なのは、componentDidMountコンポーネントがマウントされた後に関数が1回だけ呼び出され、その後、小道具が変更された場合、コンポーネントは再レンダリングされますが、写真は再度フェッチされないため、違いは見られません。必要なものはcomponentWillReceiveProps

componentWillReceiveProps(nextProps) {
    console.log('********------***********: ', nextProps.profilePhoto.dataSetChanged);

    if(this.props.profilePhoto.dataSetChanged !== nextProps.profilePhoto.dataSetChanged) {
        if(nextProps.profilePhoto.photos.length === 0 || nextProps.profilePhoto.dataSetChanged){
            this.props.getPhotos();
        }
     }
 }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

配列として渡された小道具を変更しても、React機能コンポーネントは再レンダリングされません

分類Dev

子コンポーネントの小道具が変更されていない場合でも、Reactはそれを再レンダリングしますか?

分類Dev

Reactコンポーネントは小道具の変更時に再レンダリングされません

分類Dev

React Native:コンポーネントは再レンダリングされますが、小道具は変更されていません

分類Dev

親からの小道具が変更された後、Reactの子コンポーネントは再レンダリングされません

分類Dev

コンポーネントは再レンダリングされませんが、reactフックを介してredux状態が変更されました

分類Dev

Reactコンポーネントは同じ小道具で再レンダリングされませんが、子の状態が変化します

分類Dev

react-redux connectはコンポーネントを再レンダリングしませんが、小道具は更新されます

分類Dev

小道具が変更されてもReactは再レンダリングされません

分類Dev

小道具が変更されたときに、このReactコンポーネントが再レンダリングされないのはなぜですか?

分類Dev

小道具が変更されたときに、このReactコンポーネントが再レンダリングされないのはなぜですか?

分類Dev

小道具が変更されていないのにReactコンポーネントが再レンダリングされるのはなぜですか?

分類Dev

Reactコンポーネントは、「状態または小道具の変更」または「すべての状態の変更」で再レンダリングされ、公式ドキュメントを混乱させます

分類Dev

配列プロップが変更されても、Reactサブコンポーネントは再レンダリングされません

分類Dev

状態が変化してもReactコンポーネントは再レンダリングされません

分類Dev

React redux-親の状態は変化しますが、子コンポーネントは再レンダリングされません

分類Dev

React / reactフック:状態が変更された後、子コンポーネントが再レンダリングされませんか?

分類Dev

状態が変化しても、reactコンポーネントの入力要素の値が再レンダリングされません

分類Dev

React / Reduxコンポーネントは再レンダリングされません

分類Dev

reactJsの親の状態を変更しても、reactの子コンポーネントの小道具は変更されません

分類Dev

新しい状態を設定しても、コンポーネントはReactフックで再レンダリングされません

分類Dev

Reactコンポーネントはredux小道具でChartJSチャートを再レンダリングしません

分類Dev

React-reduxコンポーネントは、状態変更後に再レンダリングされません

分類Dev

Reactコンポーネントのレンダリングから何も返されませんでした

分類Dev

Reactで渡す小道具を変更してもコンポーネントが更新されない

分類Dev

小道具の変更に基づいて再レンダリングされないReactコンポーネント

分類Dev

使用されているようにReactコンポーネントを再レンダリングしないMobX @ computedが変更されました

分類Dev

状態が変化した後、機能コンポーネントは再レンダリングされません[React]

分類Dev

状態を変更した後、Reactコンポーネントが再レンダリングされない

Related 関連記事

  1. 1

    配列として渡された小道具を変更しても、React機能コンポーネントは再レンダリングされません

  2. 2

    子コンポーネントの小道具が変更されていない場合でも、Reactはそれを再レンダリングしますか?

  3. 3

    Reactコンポーネントは小道具の変更時に再レンダリングされません

  4. 4

    React Native:コンポーネントは再レンダリングされますが、小道具は変更されていません

  5. 5

    親からの小道具が変更された後、Reactの子コンポーネントは再レンダリングされません

  6. 6

    コンポーネントは再レンダリングされませんが、reactフックを介してredux状態が変更されました

  7. 7

    Reactコンポーネントは同じ小道具で再レンダリングされませんが、子の状態が変化します

  8. 8

    react-redux connectはコンポーネントを再レンダリングしませんが、小道具は更新されます

  9. 9

    小道具が変更されてもReactは再レンダリングされません

  10. 10

    小道具が変更されたときに、このReactコンポーネントが再レンダリングされないのはなぜですか?

  11. 11

    小道具が変更されたときに、このReactコンポーネントが再レンダリングされないのはなぜですか?

  12. 12

    小道具が変更されていないのにReactコンポーネントが再レンダリングされるのはなぜですか?

  13. 13

    Reactコンポーネントは、「状態または小道具の変更」または「すべての状態の変更」で再レンダリングされ、公式ドキュメントを混乱させます

  14. 14

    配列プロップが変更されても、Reactサブコンポーネントは再レンダリングされません

  15. 15

    状態が変化してもReactコンポーネントは再レンダリングされません

  16. 16

    React redux-親の状態は変化しますが、子コンポーネントは再レンダリングされません

  17. 17

    React / reactフック:状態が変更された後、子コンポーネントが再レンダリングされませんか?

  18. 18

    状態が変化しても、reactコンポーネントの入力要素の値が再レンダリングされません

  19. 19

    React / Reduxコンポーネントは再レンダリングされません

  20. 20

    reactJsの親の状態を変更しても、reactの子コンポーネントの小道具は変更されません

  21. 21

    新しい状態を設定しても、コンポーネントはReactフックで再レンダリングされません

  22. 22

    Reactコンポーネントはredux小道具でChartJSチャートを再レンダリングしません

  23. 23

    React-reduxコンポーネントは、状態変更後に再レンダリングされません

  24. 24

    Reactコンポーネントのレンダリングから何も返されませんでした

  25. 25

    Reactで渡す小道具を変更してもコンポーネントが更新されない

  26. 26

    小道具の変更に基づいて再レンダリングされないReactコンポーネント

  27. 27

    使用されているようにReactコンポーネントを再レンダリングしないMobX @ computedが変更されました

  28. 28

    状態が変化した後、機能コンポーネントは再レンダリングされません[React]

  29. 29

    状態を変更した後、Reactコンポーネントが再レンダリングされない

ホットタグ

アーカイブ