TypeError: getClientById не является функцией при использовании useEffect в одном компоненте

Question

У меня проблема, которую я не могу понять, в одном компоненте я получаю ошибку при попытке запустить функцию действия изнутри useEffect.

Насколько я вижу, она установлена так же, как и другие мои компоненты, которые имеют аналогичную функцию, и при импорте я использую один действия, которые используются в другом компоненте, я получаю тот же результат. Это заставляет меня думать, что проблема в том, как я реализую useEffect, но я не вижу, что я делаю неправильно.

Ошибка:

TypeError: getClientById is not a function
(anonymous function)
/components/clients/Client.js:10
   7 | const Client = getClientById => {
   8 |   let { id } = useParams();
   9 |   useEffect(() => {
> 10 |     getClientById(id);
  11 |   }, [getClientById]);
  12 | 
  13 |   return <div>test</div>;

Код:

import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { useParams } from "react-router-dom";
import { connect } from "react-redux";
import { getClientById } from "../../actions/client";

const Client = getClientById => {
  let { id } = useParams();
  useEffect(() => {
    getClientById(id);
  }, [getClientById,id]);

  return <div>test</div>;
};

Client.propTypes = {
  getClientById: PropTypes.func.isRequired,
  client: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  client: state.client,
  auth: state.auth
});

export default connect(mapStateToProps, { getClientById })(Client);

Код для getClientById

import { GET_CLIENT, POST_ERROR, ADD_CLIENT } from "./types";
import axios from "axios";

// Get profile by ID
export const getClientById = clientId => async dispatch => {
  try {
    const res = await axios.get(`/api/client/${clientId}`);

    dispatch({
      type: GET_CLIENT,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: POST_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};

Заранее благодарим за любую помощь.

D

Answer 1

Аргументом для функционального компонента является объект props. Вы, вероятно, имеете в виду:

const Client = props => {
  let { id } = useParams();
  useEffect(() => {
    props.getClientById(id);
  }, [props.getClientById,id]);

  return <div>test</div>;
};

Или вы можете деструктурировать объект props и получить к нему доступ напрямую:

const Client = ({ getClientById }) => {