Question

我一直在尝试，尝试通过我的组件不会重新渲染自身。下面是我的reducer代码，我已经尽一切努力不改变状态。在我的组件代码的内部render方法中，我有一条日志语句console.log（“ Check Here”）;我知道该组件不会重新渲染，因为此日志在组件首次渲染时起作用，但是在reducer更改状态后，不会调用log语句。在日志中，我可以清楚地看到上一个状态和下一个状态是不同的，只是我正在更改一个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

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


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

或者选中https://jsfiddle.net/xt3sqoc6/1/，然后打开您的开发工具以查看重新渲染。

Answer 2

我想您正在使用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 3

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

重新呈现组件

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

您可以在setState()中立即调用componentDidUpdate，但请注意，它必须像上面的示例一样被包裹起来，否则会导致无限循环。

希望这对您有所帮助。放心怀疑。

状态更改后，react -redux组件不会重新呈现

3 个答案: