Javascript ReactJS+;Redux,获取错误“;失败的支柱类型'的右侧;instanceof';“不可赎回”;

Javascript ReactJS+;Redux,获取错误“;失败的支柱类型'的右侧;instanceof';“不可赎回”;,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,我正在帮助React开发一个web应用程序,我们正在使用Redux进行全局状态控制 我不明白的是,为什么我们会在浏览器控制台上看到这些警告?需要什么才能让它消失?在声明道具类型时似乎出现了问题,但我不知道如何正确执行 以下是警告和相关代码,为简洁起见进行了简化 浏览器控制台 Warning: Failed prop type: Right-hand side of 'instanceof' is not callable in SearchBar (created by Connect

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

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

以下是警告和相关代码,为简洁起见进行了简化


浏览器控制台

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

常数

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

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

您的
SearchBarActions
变量是一个JavaScript对象,不可调用,尽管它的TitleCase名为

我想你想要更像这样的东西:

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

参考资料:

Aaron,你搞定了!非常感谢你的解释。使用您的答案,我还可以修复应用程序中显示相同警告的其他区域。很高兴为您提供帮助,Leandro!