javascript - ReactJS + Redux，出现错误 "Failed prop type: Right-hand side of ' instanceof' is not callable”

Question

我正在帮助在 React 中开发一个 Web 应用程序，我们正在使用 Redux 进行全局状态控制。

我不明白的是为什么我们会在浏览器控制台上收到这些警告？需要什么才能使它消失？声明 prop 类型时似乎出了问题，但我不知道如何正确执行。

下面是警告以及相关代码，为简洁起见进行了简化。

---

浏览器控制台

Warning: Failed prop type: Right-hand side of 'instanceof' is not callable
    in SearchBar (created by ConnectFunction)
    in ConnectFunction (created by Body)
    in div (created by Header)
    in div (created by Header)
    in div (created by Header)
    in Header (created by Body)
    in div (created by Body)
    in div (created by Body)
    in Body (created by Context.Consumer)
    in Route (created by AuthenticatedRoute)
    in AuthenticatedRoute (created by App)
    in Switch (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in StrictMode (created by App)
    in App
    in Provider

---

SearchBar.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as SearchBarActions from './redux/actions';

const SearchBar = props => {
  const handleSearch = () => {
    [some code here]
  };

  return (
    <div className="searchbar w-100 my-2">
      <div className="input-group">
        <input
          id="searchBar"
          name="searchBar"
          type="text"
          className="form-control rounded"
          aria-describedby="button-main-search"
        />
        <button
          type="button"
          className="btn btn-lg fas fa-search text-light pl-3"
          id="button-main-search"
          onClick={handleSearch}
        >
          <span className="sr-only">Search</span>
        </button>
      </div>
    </div>
  );
};

SearchBar.propTypes = {
  actions: PropTypes.instanceOf(SearchBarActions),
};

SearchBar.defaultProps = {};

export default connect(null, dispatch => ({
  actions: bindActionCreators(SearchBarActions, dispatch),
}))(SearchBar);

---

redux/actions

import * as CONSTANTS from './constants';

export const addSearchLogs = searchLogs => {
  return {
    type: CONSTANTS.ADD_SEARCH_LOGS,
    searchLogs,
  };
};

export const clearSearchLogs = () => {
  return {
    type: CONSTANTS.CLEAR_SEARCH_LOGS,
  };
};

---

常量

export const ADD_SEARCH_LOGS = 'ADD_SEARCH_LOGS';
export const CLEAR_SEARCH_LOGS = 'CLEAR_SEARCH_LOGS';

Answer 1

PropTypes.instanceOf 将 prop 定义为特定类的实例，通常是 React 组件，但肯定是一个函数。

您的 SearchBarActions 变量尽管具有 TitleCase 名称，但它是一个 JavaScript 对象，并且不可调用。

我认为你想要更多类似这样的东西:

  actions: PropTypes.shape({
    addSearchLogs: PropTypes.func,
    clearSearchLogs: PropTypes.func
  }),

引用:https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes