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

我一直在尝试，我的组件不会重新渲染自己。下面是我的reducer代码，我已经尽了一切努力不改变状态。在我的组件代码中，在render方法内部，我有一个log语句console.log（“Check Here”）；我知道组件不会重新呈现，因为此日志在组件第一次呈现时工作，但在reducer更改状态后，不会调用log语句。在日志中，我可以清楚地看到，上一个状态和下一个状态仅因我正在更改的一个搜索类型而不同。请帮忙

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);

---

您可以使用组件更新（prevProps，prevState）。更新发生后会立即调用它&您可以将当前道具与以前的道具进行比较。使用它，您可以通过更改

状态

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

您可以在

componentdiddupdate

中立即调用

setState（）

，但请注意，必须将其包装在与上述示例类似的条件中，否则将导致无限循环

---

希望这对你有帮助。请放心。

您没有更新

searchType

值，该值已硬编码为string

新字符串

。尝试从操作中设置新状态，例如：

返回{…状态，searchType:action.payload}；

---

或者选中此项，然后打开开发工具以查看重新加载程序。

我想您正在使用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
        });
      })
  };
}

导出函数getSearch（searchtext）{
返回dispatchFunction=>{
返回轴
.get（“+searchtext）
。然后（响应=>{
调度功能({
类型：actionTypeConstants.GET\u搜索，
有效载荷：response.data.data
});
})
};
}

或

导出函数getSearch（searchtext）{
返回异步dispatchFunction=>{
常数响应=等待axios
.get（“+searchtext”）；
调度功能({
类型：actionTypeConstants.GET\u搜索，
有效载荷：response.data.data
});
};
}

返回{…状态，SearchType:“新字符串”}；拼写错误？searchType？您能发布有问题的组件代码吗？请包括州和派遣代码的映射。我已经编辑了这个问题。。大写错误发生在我修改代码的时候，我添加了一个组件code@kimi86您还可以在代码段中包含

getSearchTechnics

和

actionTypeConstants.GET\u SEARCH

？：）这仅对本地组件状态有用。OP显然在使用redux，基于代码片段。@karlmarxlopez是对的，这可能与手头的问题无关。你可能不应该在评论中如此防御性@他说，这种生命周期只对地方政府有用。但这是错误的。此问题可能是由其他错误引起的。但是你可以用它来检查道具的变化。@SDushan我知道componentdiddupdate做什么，而且我总是阅读文档：）。但是，您明确表示，“您可以立即调用setState”，这与

redux

无关。即使您使用

dispatch

调用替换

setState

，我认为这仍然是一个不好的做法。我在我的组件中添加了componentdiddupdate，即使这样也没有触发componentdiddupdate（prevProps）{if（this.props.searchType！==prevProps.searchType）{console.log（“True”）；}else{console.log(“False”）；}

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

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
    });
  };
}