组件/投票

Question

通过Redux操作更改组件时，似乎输入了ques，并且提醒也已更改。但是，如果从另一个组件导入mapStateToProps，则该值不会更改，而仅输入空值。为什么？ This is my github

组件/投票

import { combineReducers } from 'redux';
import { INFOMATION } from "../actions";

const postInitialState ={
    id: '',
    ques: '',
    ans1: '',
    ans2: ''
};


const postInfomation = (state = postInitialState, action) => {
switch (action.type) {
    case INFOMATION:
        console.log(state)
        return Object.assign({}, state, {
            id: action.id,
            ques: action.ques,
            ans1: action.ans1,
            ans2: action.ans2
        });
    default:
        return state
    }
};



const postApp = combineReducers({
    postInfomation
});

export default postApp;

减速机/投票

import React, {Component, Fragment} from 'react';
import { connect } from 'react-redux';

class Vote extends Component {
    render() {
        return (
            <Fragment>
                <h1>qwe</h1>
                <h1>{this.props.id}</h1>
                <h1>{this.props.ques}</h1>
            </Fragment>
        )
    }
}

let mapStateToProps = (state) => {
    console.log(state)
    return {
        id: state.postInfomation.id,
        ques: state.postInfomation.ques,
        ans1: state.postInfomation.ans1,
        ans2: state.postInfomation.ans2
    };
}

Vote = connect(mapStateToProps) (Vote);

export default Vote;

Answer 1

您的代码正在运行，但是通过访问/vote页面，您的应用程序将重新加载并重新初始化状态。您可以使用Redux Devtools extension来发现它，它在导航时显示@@INIT调用。

如果您添加<Link to="/vote">Vote</Link>来导航至/vote路线，则会发现状态仍然存在。如果您使用HashRouter，则不会出现此问题，因为浏览器不会重新加载页面。

-

请注意，您的状态逻辑还有更多问题。每次用户更新您的一个输入字段时，您都会更新redux存储以及您的本地状态。但是，当用户随后提交表单时，您仅更新本地状态的ID，只有当用户再次更改输入字段之一时，该ID才会置于redux状态。

我只会在提交表单后更新redux状态。在此之前，将值保持在本地状态。还将axios呼叫移至通过redux-thunk通过操作调用的服务。

Redux mapStateToProps不起作用

组件/投票

减速机/投票

1 个答案: