为什么我收到“未捕获的错误：重新渲染次数过多”。 在尝试使用 useState 将一个从自定义挂钩中获得的常量分配给另一个常量时？

Question

I have made a custom hook that takes url and fetches the data in json format. But when I am trying to assign the data into const users using use state, I getting the error: 'Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop'

Here is the component from where I am trying to assign:

import React, { useState } from "react";
import useFetch from "./fetchData";
import Users from "./Users";
const ASSIGN5 = () => {
  const [users, setUsers] = useState();
  const { data, isLoading, error } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  setUsers(data);

  return (
    <div className="container">
      <h1 className="">Users Management App</h1>
      {isLoading && <p>Loading users...</p>}
      {error && <p>{error}</p>}

      <Search onHandleSearch={handleSearch} />
      {users && <Users users={users} />}
    </div>
  );
};

export default ASSIGN5;

And here is the useFetch hook:

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

const useFetch = (url) => {
  const [data, setData] = useState([]);
  const [isloading, setIsloading] = useState(true);
  const [error, setError] = useState();

  useEffect(() => {
    fetch(url)
      .then((res) => {
        if (!res.ok) {
          throw Error("Fetching unsucessful");
        } else {
          return res.json();
        }
      })
      .then((data) => {
        setData(data);
        setIsloading(false);
        setError(null);
      })
      .catch((error) => {
        setError(error.message);
        setIsloading(false);
      });
  }, [url]);
  return { data, isloading, error };
};

export default useFetch;

But it runs fine when I use data directly without assigning but I need to because have to filter the data using functions

I am expecting that the data will assigned to the const users

Answer 1

Don't call state setters unconditionally in the component body or that'll trigger infinite renders.

It appears you don't need the users state at all because it's just an alias of the data array returned by your useFetch hook.

const ASSIGN5 = () => {
  const { data, isLoading, error } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    <div className="container">
      <h1 className="">Users Management App</h1>
      {isLoading && <p>Loading users...</p>}
      {error && <p>{error}</p>}

      <Search onHandleSearch={handleSearch} />
      {data?.length && <Users users={data} />}
    </div>
  );
};

If you want to rename it you can use

const { data: users, isLoading, error } = useFetch(...);
// now you can replace `data` with `users`

Search and handleSearch weren't defined but I assume those are in your actual code somewhere.

Components are typically PascalCase , so ASSIGN5 should be Assign5 .