Состояние React redux, отображаемое в массив реквизитов, равно null при обновлении - PullRequest
Новая
       50

Состояние React redux, отображаемое в массив реквизитов, равно null при обновлении

0 голосов
/ 05 августа 2020

Я пытаюсь обновить профиль пользователя через форму и убедиться, что компонент повторно отрисовывается при обновлении и после сохранения в форме отображается правильная информация. Вот что у меня есть:

ProfileInput.tsx 


const ProfileInput = ({ user }: any) => {

   const updateHandler = () => {
        let action;

        action = UserAction.updateUser(
            formState.inputValues.name  
        )

        setError(null);
        setIsLoading(true);
        try {
            dispatch(action);
            setSaveIsDisabled(true);
        } catch (err) {
            setError(err.message);
            setIsLoading(false); 
        }
        setIsLoading(false);
    }      
  
    if(!user[0]) {
       return (<p>loading....</p>);
    }
    

        return (
        <ProfileInputContainer>
            <ProfileInputInnerContainer>
                <Form>
                    <Row>
                        <Col>
                            <Form.Group controlId="formGroupName">
                                <Form.Label>Name</Form.Label>
                                <Input
                                    authid="name"
                                    type="text"
                                    required
                                    minLength={5}
                                    autoCapitalize="none"
                                    errortext="Name must be at least 5 characters long."
                                    inputchange={inputChangeHandler}
                                    errorhandler={errorHandler}
                                    placeholder="Enter your full name"
                                    initialvalue={user[0].name} />
                            </Form.Group>
                        </Col>
                    </Row>
                 </Form>
                 <Row>
                    <Col>
                        <CustomButtonContainer>
                            <CustomButton
                                fillColour={saveIsDisabled ? Colours.light_grey : Colours.green}
                                disabled={saveIsDisabled}
                                onClick={updateHandler}
                            >
                                {isLoading ? '...loading' : 'Save'}
                            </CustomButton>
                        </CustomButtonContainer>
                    </Col>
                </Row>
            </ProfileInputContainer>
        </ProfileInputInnerContainer>
    )

   
}

const mapStateToProps = (state: any) => ({
    user: state.user.userData
});

export default connect(
    mapStateToProps
)(ProfileInput)

После загрузки страницы имя пользователя извлекается из состояния. Проблема, с которой я столкнулся, заключается в том, что при нажатии кнопки «Сохранить» и отправки в действие SET_USER похоже, что if(!user[0]) удовлетворен, поскольку все, что я вижу, это «загрузка ...». Я не уверен, почему, поскольку я console.log выхожу из пользователя, и я вижу правильные данные.

user reducer: 


export const userReducer = (state: any = initialState, action: any) => {

    switch (action.type) {
        case SET_USER:
            return { userData: action.userData }
        default:
            return state;
    }
    
    return state;

Компонент должен повторно отрисовываться, когда он перезагружается и показывает загрузку сообщение, но я не совсем уверен, почему оно попадает в сообщение о загрузке. Может ли кто-нибудь указать, где я здесь ошибаюсь?

1 Ответ

0 голосов
/ 05 августа 2020

Я думаю, вам следует изменить свои реквизиты в состояние, а затем выполнить if-else, чтобы вернуть.

React будет отображать только при изменении состояния React.

В настоящее время ваш изменение происходит только в реквизитах user.

Вам нужно будет использовать useEffect для обнаружения изменения пользовательских реквизитов и обновления состояния пользователя, что приведет к повторному рендерингу компонента.

1010 Однако вы всегда можете выбрать хук useSelecter. 
const user = useSelector((state) => state.user.userData);

Тогда вам не понадобится useEffect, поскольку useSelector уже возвращает состояние внутри вашего функционального компонента в качестве точки поворота для повторного рендеринга . Вы также можете оставить connect и mapStateToProps за кадром и просто export const ProfileInput

Кстати,

Вы должны распределить свое состояние в вашем редукторе. 

case SET_USER:
            return { ...state, userData: action.userData }
...