SetState выходит из строя в компоненте React ⇐ Javascript

[Anonymous]

У меня есть этот файл TSX с именем adminusers. Он предназначен для того, чтобы показать всех пользователей для администратора приложения, чтобы они могли выполнять операции на них. TSX выглядит следующим образом: < /p>

Код: Выделить всё

import React, { useState, useEffect } from "react";
import api from "../utils/api";
import { useNavigate } from "react-router-dom";

const API_URL = "http://localhost:8000/api";
const REFRESH_URL = `${API_URL}/token/refresh/`;

interface User {
id: number;
name: string;
role: "customer" | "vendor" | "admin";
}

const AdminUsers: React.FC = () => {
const [users, setUsers] = useState([]);
const [searchQuery, setSearchQuery] = useState("");
const [currentPage, setCurrentPage] = useState(0);
const usersPerPage = 10;

useEffect(() => {
const accessToken = localStorage.getItem("accessToken");

api.get("http://localhost:8000/api/users/", {
headers: { Authorization: `Bearer ${accessToken}` },
})
.then((response) => {
console.log("API Response:", response.data); // Debugging step
setUsers(response.data);
console.log("State Updated:", users);
})
.catch((error) => console.error("Error fetching users:", error));
}, []);

const filteredUsers = users.filter((user) =>
user.name?.toLowerCase().includes(searchQuery.toLowerCase())
);

const pageCount = Math.ceil(filteredUsers.length / usersPerPage);
const handlePageClick = ({ selected }: { selected: number }) => {
setCurrentPage(selected);
};

const displayedUsers = filteredUsers.slice(
currentPage * usersPerPage,
(currentPage + 1) * usersPerPage
);

return (

User Management
 setSearchQuery(e.target.value)}
/>



Name
Role



{displayedUsers.map((user) => (

{user.name}
{user.role}

))}



);
};

export default AdminUsers;

В функции useEffect ()) есть два консоли. Data из вызова API, а другой, чтобы показать изменение переменной пользователей , которое установлено в верхней части класса.

Код: Выделить всё

{
"id": 1,
"email": "email@gmail.com",
"role": "admin",
"is_active": true,
"is_staff": true,
"is_superuser": true
}

Вторая console.log не показывает никаких изменений в состоянии для пользователей. Кроме того, звонок фильтедоссеров впоследствии не удается с нулевой ошибкой для пользователей. Что мне не хватает? Не достаточно ли глобально? Как мне это исправить?
спасибо

Подробнее здесь: https://stackoverflow.com/questions/796 ... -component