Question

我遇到一个问题，即在分派操作后组件未重新呈现。即使在redux开发工具中。该动作和状态正在按预期方式工作。但是，它（App.js）只是不会重新呈现（在触发操作 DATE_ClickChange 之后）。

以下是代码。请帮我解决这个问题。谢谢。

这是 index.js

(targetX, targetY)

store.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./index.scss";
import "bootstrap/dist/css/bootstrap.min.css";

import App from "./components/App/App";
import { Provider } from "react-redux";
import store from "./store";

class Index extends Component {
  render() {
    return (
      <Provider store={store}>
        <div className="indexStyle">
          <App />
        </div>
      </Provider>
    );
  }
}

ReactDOM.render(<Index />, document.getElementById("index"));

rootReducer.js

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers/rootReducer";

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

dateReducer.js

import { combineReducers } from "redux";
import weatherReducer from "./weatherReducer";
import dateReducer from "./dateReducer";

export default combineReducers({
  weatherData: weatherReducer,
  dateData: dateReducer
});

dateAction

import { DATE_HandlChange, DATE_ClickChange } from "../actions/types";
import moment from "moment";

const initialState = {
  startDate: moment()
};

export default (state = initialState, action) => {
  switch (action.type) {
    case DATE_HandlChange:
      return {
        startDate: action.payload.startDate
      };
    case DATE_ClickChange:
      return {
        ...state,
        startDate: action.payload.startDate
      };
    default:
      return state;
  }
};

App.js

import { DATE_HandlChange, DATE_ClickChange } from "./types";

export const dateHandleChange = date => dispatch => {
  dispatch({
    type: DATE_HandlChange,
    payload: {
      startDate: date
    }
  });
};

export const dateClickChange = number => (dispatch, getState) => {
  dispatch({
    type: DATE_ClickChange,
    payload: {
      startDate: getState().dateData.startDate.add(number, "d")
    }
  });
};

Answer 1

我在这里不确定，但是似乎您正在使用此代码private AntPathMatcher antPathMatcher = new AntPathMatcher(); @GetMapping("/show/**") public ... image(HttpServletRequest request) { String uri = (String) request.getAttribute(HandlerMapping.PATH_WITHIN_HANDLER_MAPPING_ATTRIBUTE); String pattern = (String) request.getAttribute(HandlerMapping.BEST_MATCHING_PATTERN_ATTRIBUTE); String path = antPathMatcher.extractPathWithinPattern(pattern, uri); ... }

直接修改状态据我所知，

getState（）不会返回状态的副本。这意味着您必须先复制它。这就是为什么它不会重新渲染的原因。直接修改状态时，Redux不会重新渲染。您永远不要直接修改状态。将其视为不可变的，并先进行复制，然后再更改状态。 =）

状态减少后，Redux组件未重新呈现

1 个答案: