Блог

У меня возникли проблемы с доступом к состоянию в одном из моих компонентов. У меня есть компонент, в котором пользователь добавляет имя и вес, а затем отправляет его. Затем они перенаправляются на Домашнюю страницу. Я хочу, чтобы имя, которое было введено, отображалось на Домашней странице. Я вижу обновление состояния, но не могу понять, как получить доступ к состоянию и отобразить его имя на домашней странице. Любая помощь будет признательна. Вот компонент моей домашней страницы:

 const HomePage = () => {
    const classes = useStyles();
    const name  = useSelector(state => state.move.name);
    const displayMovementButtons = () => {
        if (name) {
            return (
                <Button 
                    className={classes.movementButtons}
                    onClick={() => history.push('/movement/:id')}
                >   
                    <div className={classes.movementName} >{name}</div>
                </Button>
            )
        }; 

        return <div className={classes.noMovementsMessage} >Click add button to begin</div>
    };

    return (
        <div className={classes.homePageContent} >
            <Header title={"Home Page" }/>
            <div>{displayMovementButtons()}</div>
            <div className={classes.fabDiv}>
                <Fab 
                    className={classes.fab}
                    onClick={() => history.push(`/add`)}>  
                    <AddIcon />      
                </Fab>
            </div>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        name: state.move.name,  
    }   
};

const withConnect = connect(
    mapStateToProps,
);

export default compose(withConnect)(HomePage);
 

Вот мой редуктор, в котором, я думаю, проблема заключается:

 const initialState = []

const addMovementReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_MOVEMENT: 
            return [ ...state, {name: action.name, weight: action.weight} ]
        default:
            return state;
    }
};

export default addMovementReducer;
 

Вот скриншот, показывающий состояние (примечание: я добавил несколько имен и весов, в конечном итоге я хотел бы, чтобы каждое » имя » отображалось на домашней странице):

Ваша move ветвь государства-это массив. Вы не можете получить доступ к имени по state.move.name . Вместо этого вы можете получить массив движений из хранилища redux и отобразить их с Array.map() помощью метода.

 const MovementButtons = ({ movements }) => {
    return (
        <div>
            {
                movements.map(({ name, weight }) => {
                    if (name) {
                        <Button
                            className={classes.movementButtons}
                            onClick={() => history.push('/movement/:id')}
                            key={name}
                        >
                            <div className={classes.movementName}>{name}</div>
                        </Button>
                    }

                    return (
                        <div className={classes.noMovementsMessage}>Click add button to begin</div>
                    )
                })
            }
        </div>
    );
}

const HomePage = () => {
    const classes = useStyles();
    const movements  = useSelector(state => state.move);

    return (
        <div className={classes.homePageContent} >
            <Header title={"Home Page" }/>
            <MovementButtons movements={movements} />
            <div className={classes.fabDiv}>
                <Fab
                    className={classes.fab}
                    onClick={() => history.push(`/add`)}>
                    <AddIcon />
                </Fab>
            </div>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        name: state.move.name,
    }
};

const withConnect = connect(
    mapStateToProps,
);