OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Invalid hook call when calling a function

  • Thread starter Thread starter Lucas Leone
  • Start date Start date
L

Lucas Leone

Guest
I'm doing a React project. I have two reutilizable functions that made requests to an API. When I call the functions, react raise the error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app

I have fetchCustomers.jsx:

Code:
export default function fetchCustomers() {
  const [customers, setCustomers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('customers/', {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('access_token')}`
          }
        });
        setCustomers(response.data);
      } catch (error) {
        console.error("Error al obtener los datos de clientes.", error);
      }
    };

    fetchData();
  }, []);

  return customers;
}

fetchSales.jsx:

Code:
export default function fetchSales(params = {}) {
  const [sales, setSales] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('sales/', {
          params: params,
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('access_token')}`
          }
        });
        setSales(response.data.results);
      } catch (error) {
        console.error("Error al obtener los datos de ventas.", error);
      }
    };

    fetchData();
  }, []);

  return sales;
}

and cobrar.jsx:

Code:
export default function Cobrar() {
  const [filter, setFilter] = useState({
    startDate: null,
    endDate: null,
    customer: null,
    uncharged: true,
  });
  const [customers, setCustomers] = useState([]);
  const [sales, setSales] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const customersResponse = fetchCustomers();
        setCustomers(customersResponse);
        const salesResponse = fetchSales();
        setSales(salesResponse);
      } catch (error) {
        console.error("Error al obtener los datos.", error);
      }
    }

    fetchData();
  }, []);

I tried call the functions in the const and works but I can't filter the sales by params. I want to get all the sales and then filter by daterange and some fields.

<p>I'm doing a React project. I have two reutilizable functions that made requests to an API. When I call the functions, react raise the error:</p>
<blockquote>
<p>Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
<ol>
<li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
<li>You might be breaking the Rules of Hooks</li>
<li>You might have more than one copy of React in the same app</li>
</ol>
</blockquote>
<p>I have fetchCustomers.jsx:</p>
<pre><code>export default function fetchCustomers() {
const [customers, setCustomers] = useState([]);

useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('customers/', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
}
});
setCustomers(response.data);
} catch (error) {
console.error("Error al obtener los datos de clientes.", error);
}
};

fetchData();
}, []);

return customers;
}
</code></pre>
<p>fetchSales.jsx:</p>
<pre><code>export default function fetchSales(params = {}) {
const [sales, setSales] = useState([]);

useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('sales/', {
params: params,
headers: {
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
}
});
setSales(response.data.results);
} catch (error) {
console.error("Error al obtener los datos de ventas.", error);
}
};

fetchData();
}, []);

return sales;
}
</code></pre>
<p>and cobrar.jsx:</p>
<pre><code>export default function Cobrar() {
const [filter, setFilter] = useState({
startDate: null,
endDate: null,
customer: null,
uncharged: true,
});
const [customers, setCustomers] = useState([]);
const [sales, setSales] = useState([]);

useEffect(() => {
const fetchData = async () => {
try {
const customersResponse = fetchCustomers();
setCustomers(customersResponse);
const salesResponse = fetchSales();
setSales(salesResponse);
} catch (error) {
console.error("Error al obtener los datos.", error);
}
}

fetchData();
}, []);
</code></pre>
<p>I tried call the functions in the const and works but I can't filter the sales by params. I want to get all the sales and then filter by daterange and some fields.</p>
 

Latest posts

Top