时间戳

首页 > 解决方案 > React redux 映射状态到 props 数组在更新时为空

javascript - React redux 映射状态到 props 数组在更新时为空

问题描述

我正在尝试通过表单更新用户的个人资料，并确保组件在更新时重新呈现，并且在保存后正确的信息显示在表单上。这是我到目前为止所拥有的：

配置文件输入.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 out 用户并看到正确的数据时。

用户减速器：


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

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

组件在重新加载并显示加载消息时必须重新渲染，但我不完全确定它为什么会遇到加载消息。有人可以指出我在这里出错的地方吗？

标签： javascriptreactjsreduxreact-redux

解决方案

我认为您应该将道具更改为状态，然后执行 if-else 以返回。

React 只会在 React 状态发生变化时渲染。

目前，您的更改仅在 props 是user.

您将不得不使用useEffect来检测用户道具的变化并更新用户状态，这将导致组件的重新渲染。

像这样。

const [userState,setUserState] = useState([]);

    useEffect(() => {

    setUserState(user);

    },[user]);

我给出这个例子是因为你使用connect的是 Redux 的一个高阶组件来将 redux 状态映射到你的组件 props 中。

但是，您始终可以选择useSelecter挂钩。

const user = useSelector((state) => state.user.userData);

那么你就不需要了，useEffect因为它useSelector已经在你的功能组件中返回了一个状态作为重新渲染枢轴。connect你也可以离开mapStateToProps图片export const ProfileInput

顺便一提，

你应该在你的减速器中传播你的状态。

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

推荐阅读