在 React 中无效使用 useEffect function

Question

I'm having an issue with calling useEffect from this function. I haven't been using React that long so I may have some glaring issues but this is taking up too much time.

My function is as follows:

import React, { Component } from 'react';
import { useState, useEffect } from "react";

export function Sessions() {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [count, setCount] = useState(null);

    useEffect(() => {
        fetch(`https://localhost:7126/api/`)
            .then((response) => {
                if (!response.ok) {
                    throw new Error(
                        `This is an HTTP error: The status is ${response.status}`
                    );
                }
                return response.json();
            })
            .then((actualData) => {
                setData(actualData);
                setError(null);
                setCount(actualData.length);
            })
            .catch((err) => {
                console.log(err.message);
            });
    }, []);


    return (
        <div className="App">
            <h1>Stream Request: {count} records</h1>
            {loading && <div>A moment please...</div>}
            {error && (
                <div>{`There is a problem fetching the post data - ${error}`}</div>
            )}
            <ul>
                {data &&
                    data.map(({ StreamId, EntryTime }) => (
                        <li key={StreamId}>
                            <h3>{EntryTime}</h3>
                        </li>
                    ))}
            </ul>
        </div>
    );
}

The error i'm receiving is

Warning: 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

#1)I have updated React and React-Dom they were both up to date.
#2)? I don't think I am?

#3) I have verified this using npm ls react and my output is as follows:

+-- react-dom@18.2.0
| `-- react@18.2.0 deduped
+-- react-router-dom@6.4.3
| +-- react-router@6.4.3
| | `-- react@18.2.0 deduped
| `-- react@18.2.0 deduped
+-- react@18.2.0
`-- reactstrap@9.1.5
  +-- react-popper@2.3.0
  | `-- react@18.2.0 deduped
  +-- react-transition-group@4.4.5
  | `-- react@18.2.0 deduped
  `-- react@18.2.0 deduped

All seem to be deduped? Please help, none of the other questions have helped my issue such as: Invalid Hook Call but not really

Edit I use Sessions via App.js & AppRoutes.js App.js:

import "./stylesheet.css";
import React, { Component } from 'react';
import { Route, Routes } from 'react-router-dom';
import AppRoutes from './AppRoutes';
import { Layout } from './components/Layout';


export default class App extends Component {
    static displayName = App.name;

    render() {
        return (
            <Layout>
                <Routes>
                    {AppRoutes.map((route, index) => {
                        const { element, ...rest } = route;
                        return <Route key={index} {...rest} element={element} />;
                    })}
                </Routes>
            </Layout>
        );
    }
}

AppRoutes.js:

import { Sessions } from "./components/Sessions";
import { Messages } from "./components/Messages";
import { Home } from "./components/Home";

const AppRoutes = [
  {
    index: true,
    element: <Home />
  },
  {
    path: '/sessions',
    element: <Sessions />
  },
  {
    path: '/messages',
    element: <Messages />
  }
];

export default AppRoutes;

Answer 1

I know this is probably not the solution but maybe it could give you some ideas. As you are not await ing the call properly inside your useEffect() , it could be causing issues for your code and errors that are not that descriptive.

Here are some suggestions:

• use the async / await API instead of the .then() / .catch() from Promises.
• create an internal function for your asynchronous function and call it inside the useEffect() hook after defining it. In general (from my experience), async calls at "top-level" useEffect() hook trigger some warnings.

As a possible solution, this is the code I suggest you change and start from:

useEffect(() => {
  const internalFetch = async () => {
    try {
      const actualData = await fetch(`https://localhost:7126/api/`)
      setData(actualData);
      setError(null);
    } catch (err) {
      console.log(err.message);
    }
  }

  internalFetch();
}, []);

You could use data.length directly instead of creating a state for count .

Again: I don't know if this will fix your issue but it could give you another error that could be more descriptive. And, also as a final suggestion, you could use a lib for fetching data such as react-query , that isolates and cache your data for you.