Как исправить TypeError: Cannot read property 'isFollowed' of undefined. React?

Question

[Im p3l]

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

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')
);

Answer 1

[0xD34F]

return {
    ...user,
    isFollowed: !this.isFollowed
};

Вот бы узнать: с чего вы взяли, что user и this - это одно и то же?

Comments

[Im p3l]

return {
     ...user,
    isFollowed: !isFollowed
};

делал так, но тоже не работает

[Pavel Shvedov]

Lo Ran, isFollowed: !user.isFollowed

[Im p3l]

Pavel Shvedov, Спасибо!