Question

我正在使用redux来控制具有布尔状态的Ant Design Modal组件。基本上，它具有一个用于分派动作以更改状态的按钮，并且组件将读取状态值。

状态已正确更改，但组件属性值未相应更新。不知道为什么它不起作用。

我在reducer中尝试了不同的方法，例如创建一个新的boolean对象，以避免改变状态，但是没有运气。

myAction.js

export const modalVisibilityOn = () => ({
    type: 'MODAL_ON'
})

export const modalVisibilityOff = () => ({
    type: 'MODAL_OFF'
})

myReducer.js

const modalVisibility = (state = false, action) => {
    switch (action.type){
        case 'MODAL_ON':
            return true
        case 'MODAL_OFF':
            return false
        default:
            return state
    }
}

export default modalVisibility

myRootReducer.js

import { combineReducers } from 'redux'
import modalVisibility from './signPage/myReducer'

export default combineReducers({
    modalVisibility
})

myModal.js

import React from "react";
import PropTypes from 'prop-types'
import { Modal, Input } from 'antd';

import { connect } from 'react-redux'
import { modalVisibilityOff } from '../../reducers/signPage/myAction'

class myModal extends React.Component {

    render() {
    const { visibility, handleOk, handleCancel } = this.props;

    myModal.propTypes = {
      visibility: PropTypes.bool.isRequired,
      handleOk: PropTypes.func.isRequired,
      handleCancel: PropTypes.func.isRequired,
        }

        return (
            <Modal
              title="Sign"
              visible={visibility}
              onOk={handleOk}
              onCancel={handleCancel}
              closable={false}
            >
              <p>Please input your staff ID</p>
              <Input addonBefore="Staff ID" />
            </Modal>
        );
    }
}

const mapStateToProps = state => {
  return {
    visibility: state.modalVisibility
  }
}

const mapDispatchToProps = dispatch => ({
  handleOk: () => dispatch(modalVisibilityOff()),
  handleCancel: () => dispatch(modalVisibilityOff()),
})

export default connect(
  mapStateToProps,mapDispatchToProps
)(myModal)

myModalContainer.js

import React from "react";
import { Input } from "antd";
import { Button } from 'antd';
import { Row, Col } from 'antd';
import { Typography } from 'antd';

import PropTypes from 'prop-types'
import myModal from '../../dialogs/signPage/myModal';

import { connect } from 'react-redux'
import { modalVisibilityOn } from '../../reducers/signPage/myAction'

class myModalContainer extends React.Component {

  render() {
        const { Title } = Typography;

        const { onClick } = this.props;

    myModalContainer.propTypes = {
      onClick: PropTypes.func.isRequired
        }

    return (
            <div className="search-container-parent">
                <Row className="search-container">
                    <Col className="search-col1" xs={24} sm={12}>
                        <Input size="large" style={{width:'40%'}} id="issueReturnNo" placeholder="QR code here"/>
                        <Button size="large">SEARCH</Button>
                        <div className="signBtn-div">
                            <Button size="large" type="primary" onClick={onClick} >SIGN</Button>
                            <myModal />
                        </div>
                    </Col>
                    <Col xs={24} sm={12}>
                        <Title className="issueLog-title" level={3} style={{color:"#F08080"}}>Issue</Title>
                    </Col>
                </Row>
            </div>
    );
  }
}

    const mapDispatchToProps = dispatch => ({
        onClick: () => dispatch(modalVisibilityOn())
    })

  export default connect(
    null, mapDispatchToProps
  )(myModalContainer);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { createStore } from 'redux'
import { Provider } from 'react-redux'
import rootReducer from './myRootReducer'

const store = createStore(rootReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
 document.getElementById('root'));
serviceWorker.unregister();

我希望当单击myModal.js上的符号按钮时，true上的可见性道具将为myModalContainer.js，但是它会继续显示false。

任何帮助将不胜感激。谢谢！

Answer 1

经过大量的研究和试验，事实证明我的代码没有问题。

之所以无法正常工作，是因为redux和react-redux版本。将package.json依赖项版本切换回redux官方教程使用的依赖项版本后，该应用程序可以正常运行。

万一有人遇到相同的问题，这是我现在在npm中为我的应用使用的版本：

redux: ^3.5.2
react-redux: ^5.0.7

更新：

只是发现问题的原因是由于旧版本模块和新版本模块之间的冲突。

因此，通过将package.json中的所有依赖项更新为最新版本，该应用程序也可以平稳运行。无需降级react-redux和redux。

Redux状态已更改，但组件属性未更新

1 个答案: