Javascript 道具更改时不会渲染react router redux

我正在努力使用react router redux，一切都很好，除了道具上的渲染发生了变化

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import {Router, Route, browserHistory} from 'react-router';
import { syncHistoryWithStore, routerReducer, routerMiddleware } from 'react-router-redux';
import App from './app';
import Sign from '../sign/app';
import SignInfo from '../sign/redux/reducer';

let store = createStore(
  combineReducers({
    SignInfo,
    routing: routerReducer
  }),
);

const history = syncHistoryWithStore(browserHistory, store);

class Index extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log('root')
    return (
      <Provider store={store}>
        <Router history={history}>
          <Route path="/" component={App}/>
          <Route path="/sign" component={Sign}/>
        </Router>
      </Provider>
    );
  }
}

ReactDOM.render(<Index/>, document.getElementById('root'));

有人说，导出行上的add

withRouter

功能将修复此错误，但事实并非如此。(). 但是，当作为

SignPaze1

成员的状态发生更改时，通常会再次呈现

如何解决由react router redux引起的此问题

编辑

action.js

export const HANDLE_SIGN_INPUT = 'HANDLE_SIGN_INPUT';

export function handleSignInput(target, value){
  return {
    type: HANDLE_SIGN_INPUT,
    target: target,
    value: value,
  }
}

---

我认为这里的问题是您应该使用

combinereducer

，而不是使用包含嵌套对象的单个reducer

您可能需要专门为

signData

创建一个reducer，并使用Redux的方法

新文件：signDataReducer.js reducer.js 它以前不工作的原因是因为

Object.assign

的工作方式，它将

signData

的引用复制到assign创建的新对象

然后，当通过浅层比较来比较

SignPaze1

道具时，

signData

与之前是完全相同的对象，因此被认为是相等的。并且不会发生渲染

i、 e

---

当您更新什么道具时，哪个组件没有重新呈现？@JacobPålsson class

SignPaze1

在SignPaze1.js文件中不会“再次”呈现。（我的意思是，第一次加载页面时，

SignPaze1

呈现良好，但在道具更改后，它不会重新呈现。）我在

mapstatetrops（）中找到了
console.log
）

运行良好，但不在

render（）

中运行，这是

SignPaze1

类的成员函数。能否显示您的action.jsfile@TomBerghuis我在帖子中添加了

action.js

文件。

import React from 'react';
import { bindActionCreators } from 'redux';
import {connect} from 'react-redux';
import Belle from 'belle';
import { withRouter } from 'react-router';
import {Grid, Row, Col} from 'react-flexbox-grid';

import {handleSignInput} from './redux/action';

class SignPaze1 extends React.Component {
  constructor(props) {
    super(props);

    this.handleInputValue = this.handleInputValue.bind(this);

  }

  handleInputValue(e) {
    let {dispatch} = this.props;
    console.log('on render')
    const action = bindActionCreators(handleSignInput, dispatch)
    action(e.target.id, e.target.value);
  }
  render() {
    let signData = this.props.signData;
    let mainCardStyle = {
      border: '1px solid #aaa',
    }
    return (
      <Grid>
        <Row>
          <Col xs={12}>
            <Belle.Card style={mainCardStyle}>
              <Row center="md">
                <Col xs={12} sm={6} md={4} lg={3}
                     className="input-group">
                  <input type="text"
                         id="company_number"
                         value={signData.company_number}
                         onChange={this.handleInputValue}/>
                </Col>
                <Col xs={12} sm={6} md={4} lg={3}
                     mdOffset={1} lgOffset={2}
                     className="input-group">
                  <Belle.TextInput
                    onUpdate={this.handleInputValue.bind(this, 'data')}/>
                </Col>
              </Row>
              <Row center="md">
                <Col xs={12} sm={6} md={4} lg={3}
                     className="input-group">
                  <Belle.TextInput
                    onUpdate={this.handleInputValue.bind(this, 'da2')}/>
                </Col>
                <Col xs={12} sm={6} md={4} lg={3}
                     mdOffset={1} lgOffset={2}
                     className="input-group">
                  <Belle.TextInput
                    onUpdate={this.handleInputValue.bind(this, 'dat3')}/>
                </Col>
              </Row>
            </Belle.Card>
          </Col>
        </Row>
      </Grid>
    )
  }
}

function mapStateToProps(state) {
  console.log(state.SignInfo);
  return {
    signData: state.SignInfo.signData,
  }
}

export default withRouter(connect(mapStateToProps)(SignPaze1));

import {HANDLE_SIGN_INPUT} from './action';

const initialMainState = {
  signData: {
    company_number: 'asdas|',
    company_name: '',
    username: '',
    email: '',
    email_confirm: '',
    password: '',
    password_confirm: '',
  }
}

function SignInfo(state = initialMainState, action) {
  let newVal = {};
  switch (action.type) {
    case HANDLE_SIGN_INPUT:
      newVal = Object.assign({}, state);
      newVal.signData[action.target] = action.value;
      return newVal;
    default:
      return state;
  }
}

export default SignInfo;

export const HANDLE_SIGN_INPUT = 'HANDLE_SIGN_INPUT';

export function handleSignInput(target, value){
  return {
    type: HANDLE_SIGN_INPUT,
    target: target,
    value: value,
  }
}

import {HANDLE_SIGN_INPUT} from './action';

const initialMainState = {
  company_number: 'asdas|',
  company_name: '',
  username: '',
  email: '',
  email_confirm: '',
  password: '',
  password_confirm: '',
};

export default function SignData (state = initialMainState, action) {
  let newVal = {};
  switch (action.type) {
    case HANDLE_SIGN_INPUT:
      newVal = Object.assign({}, state);
      newVal[action.target] = action.value;
      return newVal;
    default:
      return state;
  }
}

import { combineReducers } from 'redux';
import signDataReducer from './signDataReducer';

export default combineReducers({
  signDataReducer
});

const initialMainState = {
  signData: {
    company_number: 'asdas|',
    company_name: '',
    username: '',
    email: '',
    email_confirm: '',
    password: '',
    password_confirm: '',
  }
}
const newState = Object.assign({}, initialMainState);


newState.signData.company_name = 'Hello!';
// => "Hello!"
initialMainState.signData.company_name
// => "Hello!"
newState.signData === initialMainState.signData
// => true