react -redux 组件在状态更改后不会重新渲染

Question

我一直在尝试，我的组件不会重新渲染自己。下面是我的减速器代码，我已经尽一切努力不改变状态。在我的组件代码中，在渲染方法中，我有一个日志语句 console.log("Check Here");我知道组件不会重新渲染，因为此日志在组件第一次渲染时工作，但在 reducer 更改状态后，日志语句没有被调用。在日志中，我可以清楚地看到上一个状态和下一个状态只是我正在更改的一个 SearchType 不同。请帮忙！！

const initState = {

    searchType: ""

};
const techniqueReducer = (state = initState, action) => {
   switch (action.type) {
    case actionTypeConstants.GET_SEARCH:
  {
     return { ...state, searchType: "new string" };    
  }

  default: {
    return state;
  }

}
};

export default myReducer;

我的组件代码如下

import React, { Component } from "react";
import { connect } from "react-redux";
import * as tDispatchers from "../actions/Actions";

const mapStateToProps = state => {
  return {
  
    searchType: state.searchType
  };
};

class SearchCollection extends Component {

  Search= () => {
    this.props.dispatch(tDispatchers.getSearch(document.getElementById("txtSearch").value));
  }
 
  render() {
    console.log("Check Here")

    return (
      <div class="container-fluid">
        <div>

          <input
            type="text"
            id="txtSearch"
            class="form-control"
            placeholder="Enter Search Keywords Here..."
          />
        </div>
        <div>
    <button
            className="btn btn-light btn-sm m-1"
            onClick={this.Search}
          >
            Search
          </button>
         

        </div>
  
      </div>
    );
  }
}

export default connect(mapStateToProps)(SearchCollection);

GetSearch 如下所示 我计划最终将有效负载传递给减速器，但目前我没有

import * as actionTypeConstants from "../action_type_constants";
import axios from "axios";

export function getSearch(searchtext) {

    return dispatchFunction => {
      axios
      .get("<api call>"+searchtext)
      .then(response => {

          dispatchFunction({
            type: actionTypeConstants.GET_SEARCH,
            payload: response.data.data
          });
        })
      };

    }

ActionTypeConstant

export const GET_SEARCH = "GET_SEARCH";

Answer 1

我想您正在使用 redux-thunk 来处理异步操作。但是您不会从 getSearch 返回异步函数。我认为应该是

export function getSearch(searchtext) {
  return dispatchFunction => {
    return axios
      .get("<api call>"+searchtext)
      .then(response => {
        dispatchFunction({
          type: actionTypeConstants.GET_SEARCH,
          payload: response.data.data
        });
      })
  };
}

或

export function getSearch(searchtext) {
  return async dispatchFunction => {
    const response = await axios
      .get("<api call>"+searchtext);
    dispatchFunction({
      type: actionTypeConstants.GET_SEARCH,
      payload: response.data.data
    });
  };
}

Answer 2

您没有更新searchType 值，它被硬编码为字符串new string。尝试从操作中设置新状态，例如：

return { ...state, searchType: action.payload};

或查看https://jsfiddle.net/xt3sqoc6/1/ 并打开您的开发工具以查看重新渲染。

Answer 3

您可以使用componentDidUpdate(prevProps, prevState)。它在更新发生后立即调用，您可以将当前道具与以前的道具进行比较。使用它，您可以通过更改 state

来重新渲染您的组件

componentDidUpdate(prevProps) {
  if (this.props.SearchType !== prevProps.SearchType) {
    //Do whatever needs to happen!
  }
}

您可以立即在componentDidUpdate 中调用setState()，但请注意，它必须包含在上面示例中的条件中，否则会导致无限循环。

希望这对您有所帮助。如有疑问，请随意。