ReactJS + Redux, получая ошибку «Ошибка типа проп: правая часть instanceof не вызывается»

Question

Я помогаю в разработке веб-приложения в React, и мы используем Redux для глобального контроля состояния.

Чего я не понимаю, так почему мы получаем эти предупреждения на консоли браузера? Что нужно, чтобы сделать это go прочь? Похоже, что-то не так при объявлении типов реквизита, но я не могу понять, как это сделать правильно.

Ниже приведено предупреждение и соответствующий код, упрощенный для краткости.

---

Консоль браузера

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

Answer 1

PropTypes.instanceOf определяет свойство как экземпляр определенного класса, обычно компонента React, но, безусловно, функции.

Ваша переменная SearchBarActions, несмотря на название TitleCase, представляет собой JavaScript объект, и он не может быть вызван.

Я думаю, вы хотите что-то похожее на это:

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

Ссылка: https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes