0

При нажатии на кнопку, хочу поменять состояние кнопки и вылазит ошибка: TypeError: Cannot read property 'isFollowed' of undefined в usersReducer

import React from 'react';
import ReactDOM from 'react-dom';
import { combineReducers, createStore } from 'redux';

const initialState = {
    users: [
        {
            id: 2,
            fullName: 'Arnold',
            status: 'Follow me',
            location: {
                city: 'Moscow',
                country: 'Russia'
            },
            isFollowed: false
        },
        {
            id: 3,
            fullName: 'Alex Terrible',
            status: 'New song coming soon',
            location: {
                city: 'Yekaterinburg',
                country: 'Russia'
            },
            isFollowed: false
        },
        {
            id: 4,
            fullName: 'Phil Bozeman',
            status: 'New album tomorrow',
            location: {
                city: 'Knoxville',
                country: 'USA'
            },
            isFollowed: false
        },
        {
            id: 5,
            fullName: 'Andrew Martin',
            status: 'Hi guys',
            location: {
                city: 'Toronto',
                country: 'Canada'
            },
            isFollowed: false
        }
    ]
};

const usersReducer = (state = initialState, action) => {
    switch (action.type) {
        case TOGGLE_FOLLOW: {
            return {
                ...state,
                users: state.users.map(user => {
                    if (user.id === action.id) {
                        return {
                            ...user,
                            isFollowed: !this.isFollowed
                        };
                    }
                    return user;
                })
            };
        }
        default: {
            return state;
        }
    }
};

const toggleFollow = (id) => ({
    type: TOGGLE_FOLLOW,
    id
});

const Users = (props) => {
    const user = props.users.map(user => {
        return <div key={ user.id } className={ styles.box }>
            <figure>
                <img src='' alt="" className={ styles.bg } />
            </figure>
            <div className={ styles.meta }>
                <img src={ user.avatar } className={ styles.avatar } alt='' />
                <div className={ styles.name }>
                    <a href="" className={ styles.link }>
                        { user.fullName }
                    </a>
                    <span className={ styles.location }>
                        { user.location.city }, { user.location.country }
                    </span>
                </div>
                <ul className={ styles.info }>
                    <li>
                        { user.status }
                    </li>
                </ul>
                <button onClick={ () => {
                    props.toggleFollow(user.id);
                } } className={ styles.button }>
                    { user.isFollowed ? 'Unfollow' : 'Follow' }
                </button>
            </div>
        </div>;
    });

    return (
        <div>
            { user }
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        users: state.usersPage.users
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        toggleFollow: (id) => {
            dispatch(toggleFollowAC(id));
        }
    };
};

connect(mapStateToProps, mapDispatchToProps)(Users);

const reducers = combineReducers({
    usersPage: usersReducer
})

const store = createStore(reducers);

const App = () => {
    return ( < UsersContainer /> );
};

ReactDOM.render(
        <Provider store={ store }>
            <App />
        </Provider>,
    document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.2/react-redux.min.js"></script>

<div id="root"></div>

1 ответ 1

1

Вместо isFollowed: !this.isFollowed нужно isFollowed: !user.isFollowed

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.