redux - 从reduxjs通过调度和getstate后反应HOC组件不起作用

Question

在转换为 HOC 组件之前，我在下面有一段代码运行良好：

class Filters extends React.Component {
  componentDidMount() {
    const { store } = this.context;
    this.unsubscribe = store.subscribe(() => this.forceUpdate());
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const { store } = this.context;
    const currentFilter = store.getState().visibilityFilter;
    const tags = ["All", "Active", "Completed"];
    return (
      <>
        Show:{" "}
        {tags.map((t, index) => {
          if (t === currentFilter) {
            return (
              <a href="#">
                {t + " "}
                {index === 2 ? " " : ","}
              </a>
            );
          }
          return (
            <a
              onClick={() => {
                store.dispatch({
                  type: "SET_VISIBILITY_FILTER",
                  filter: t
                });
              }}
            >
              {t + " "}
              {index === 2 ? " " : ","}
            </a>
          );
        })}
      </>
    );
  }
}
Filters.contextTypes = {
  store: React.PropTypes
};

我将其更改为如下所示的 HOC 组件，但它不起作用，也没有错误通知。此代码todolist来自reduxjs官方文档的规范教程。我检查了反应官方文档https://reactjs.org/docs/higher-order-components.html，没有发现任何不遵守其规则的异常。有人知道什么是错误？

const Originfilters = ({ currentFilter, handleClick = (f = f) }) => {
  const tags = ["All", "Active", "Completed"];
 
  return (
    <>
      Show:{" "}
      {tags.map((t, index) => {
        if (t === currentFilter) {
          return (
            <a href="#">
              {t + " "}
              {index === 2 ? " " : ","}
            </a>
          );
        }
        return (
          <a
            onClick={(t) => {
              handleClick(t);
            }}
          >
            {t + " "}
            {index === 2 ? " " : ","}
          </a>
        );
      })}
    </>
  );
};
class Filters extends React.Component {
  componentDidMount() {
    const { store } = this.context;
    this.unsubscribe = store.subscribe(() => this.forceUpdate());
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const { store } = this.context;
    return (
      <Originfilters
        currentFilter={store.getState().visibilityFilter}
        handleClick={(filter) => {
          store.dispatch({
            type: "SET_VISIBILITY_FILTER",
            filter
          });
        }}
      />
    );
  }
}
Filters.contextTypes = {
  store: React.PropTypes
};

Answer 1

这个逻辑现在已经过时了，取消这个问题