Помогите пожалуйста найти ошибку, ошибка заключатся в том что происходит отрисовка 2 одинаковых массива 'users' вместо 1

Рейтинг: 1Ответов: 0Опубликовано: 19.02.2023

1.Редьюсер :

let UsersState = {
    users: []
}


const UsersReducer = (state = UsersState, action) => {
    switch (action.type){
        case FOLLOW:  return {
            ...state,
            users: state.users.map(user => {
                if (user.id === action.userId) {
                    return {...user, Followed: true}
                }
                return user;
            })
        }
        case UN_FOLLOW:  return {
            ...state,
            users: state.users.map(user => {
                if (user.id === action.userId) {
                    return {...user, Followed: false}
                }
                return user;
            })
        }
        case SET_USERS: return {
            ...state,
            users: [...state.users, ...action.users]
        } 
            
        

        default : 
        return state;
    }
}

export default UsersReducer;


const FOLLOW = 'FOLLOW';
const UN_FOLLOW = 'UN_FOLLOW';
const SET_USERS = 'SET_USERS'


export const SET_USERS_AC = (users) => ({type: SET_USERS, users})
export const FOLLOW_AC = (userId) => ({type: FOLLOW, userId})
export const UN_FOLLOW_AC = (userId) => ({type: UN_FOLLOW, userId})

2.Store

import { combineReducers, legacy_createStore as createStore } from "redux";
import dialogsPageReducer from "./dialogsPageReducer";
import EasyMathReducer from "./EasyMathReducer";
import FriendsSideReducer from "./FriendSidereducer";
import MainInfoDOMReducer from "./MainInfoDOMReducer";
import UsersReducer from "./UsersReducer";


let reducers = combineReducers({
    dialogsPage: dialogsPageReducer,
    MainInfoDOM: MainInfoDOMReducer,
    friendsside: FriendsSideReducer,
    UsersDatabase: UsersReducer,
    EasyMathData: EasyMathReducer
})


let store = createStore(reducers);


export default store;

3.Container Component

import { connect } from 'react-redux';
import { FOLLOW_AC, SET_USERS_AC, UN_FOLLOW_AC } from '../../redux/UsersReducer';
import Users from './Users';


const MapStateToProps = (state) => {
    debugger;
    return {
        users: state.UsersDatabase.users
    }
}

const MapDispatchToProps = (dispatch) => {
    return {
        Follow: (UserID) => {
            dispatch(FOLLOW_AC(UserID))
        },
        UnFollow : (UserID) => { 
            dispatch(UN_FOLLOW_AC(UserID))
        },
        SetUsers: (Users) => {
            dispatch(SET_USERS_AC(Users))
        }
    }

}



const UsersConatiner = connect(MapStateToProps, MapDispatchToProps)(Users)

export default UsersConatiner;

4.Презентационная Component

import React from "react"
import s from './Users.module.css'

const Users = (props) => {


    if (props.users.length === 0) {
        debugger
        props.SetUsers([
            { id: 1, city: 'Rostov-On-Don', gender: 'male', name: 'dimasik', photo: 'https://www.meme-arsenal.com/memes/5dcd40a9d88d7d20191fd72213cb73c3.jpg', Followed: false },
            { id: 2, city: 'School76', gender: 'Female', name: 'IvanGrudi', photo: 'https://media.npr.org/assets/img/2017/09/12/macaca_nigra_self-portrait-3e0070aa19a7fe36e802253048411a38f14a79f8-s1100-c50.jpg', Followed: true },
            { id: 3, city: 'Dagestan', gender: 'male', name: 'Daniyal', photo: 'https://i.pinimg.com/736x/00/14/68/00146854117cd2b80bb267e0debf8ff0.jpg', Followed: true },
            { id: 4, city: 'Ass', gender: 'male', name: 'Ruslan', photo: 'https://i.ytimg.com/vi/xX1QWRNmw_c/maxresdefault.jpg', Followed: true },
            { id: 5, city: 'Moscow', gender: 'male', name: 'Galya', photo: 'https://i.ytimg.com/vi/cMixzK4k8bA/mqdefault.jpg', Followed: false }
        ])
    }  


    return <div>{
        props.users.map(u =>
            <span className={s.User} key={u.id}>
                <div className={s.FBlock}>
                    <img src={u.photo} className={s.FBlockPic} />
                    {u.Followed ? <button className={s.ButtonDelete} onClick={() => { props.UnFollow(u.id) }}>Delete Friend</button> : <button className={s.ButtonAdd} onClick={() => { props.Follow(u.id) }}>Add Friend</button>}
                </div>
                <div className={s.SBlock}>
                    <div>{u.name}</div>
                    <div>{u.city}</div>
                    <div>{u.gender}</div>
                </div>
            </span>
        )

    }</div>
}

export default Users;

Ответы

Ответов пока нет.