Загрузка...

How do I insert async function into Render (React)

Thread in Frontend created by K1p1k Feb 9, 2025. 422 views

  1. K1p1k
    K1p1k Topic starter Feb 9, 2025 46 Jul 1, 2022
    JS
    import { Table } from "@chakra-ui/react"
    
import axios from "axios"
    
import BACKEND from "../config"
    

    
const TabelsUser = () => {
    

    
const GetUsersTabels = async() => {
    
    const tokenbot=document.getElementById('TokenBot').value
    
    const codebot=document.getElementById('CodeBot').value
    
    
    

    
    const res=axios.post(BACKEND+'/admin/getuser', {
    
        headers: {
    
        'tokenbot' : tokenbot,
    
        'codebot' : codebot}} )
    

    
        const items_dict = res.data['ok'].map(item => {
    
          return {
    
              id: item[0],
    
              money: item[1],
    
              data: item[2],
    
              email: item[3],
    
              pin: item[4],
    
              deals: item[5],
    
              status: item[6]
    
          };
    
      });
    
      const result=items_dict.map((item) => (
    
        <Table.Row key={item.id}>
    
          <Table.Cell>{item.id}</Table.Cell>
    
          <Table.Cell>{item.money}</Table.Cell>
    
          <Table.Cell>{item.data}</Table.Cell>
    
          <Table.Cell>{item.email}</Table.Cell>
    
          <Table.Cell>{item.pin}</Table.Cell>
    
          <Table.Cell>{item.deals}</Table.Cell>
    
          <Table.Cell>{item.status}</Table.Cell>
    
          <Table.Cell textAlign="end">{item.price}</Table.Cell>
    
        </Table.Row>
    
      ))
    

    
      return result
    
    }
    

    
      
    
      
    

    

    
  return (
    
    <Table.ScrollArea>
    
      <Table.Root size="sm" variant="outline">
    
        <Table.Header>
    
          <Table.Row>
    
            <Table.ColumnHeader minW="400px">ID</Table.ColumnHeader>
    
            <Table.ColumnHeader minW="400px">Деньги</Table.ColumnHeader>
    
            <Table.ColumnHeader minW="400px">Дата</Table.ColumnHeader>
    
            <Table.ColumnHeader minW="400px">Почта</Table.ColumnHeader>
    
            <Table.ColumnHeader minW="400px">Пин-код</Table.ColumnHeader>
    
            <Table.ColumnHeader minW="400px">Сделок</Table.ColumnHeader>
    
            <Table.ColumnHeader minW="400px">Статус</Table.ColumnHeader>
    
          </Table.Row>
    
        </Table.Header>
    
        <Table.Body>
    
          <GetUsersTabels></GetUsersTabels>
    
        </Table.Body>
    
      </Table.Root>
    
    </Table.ScrollArea>
    
  )
    
}
    

    

    

    

    
export default TabelsUser
     
    Feb 9, 2025 Edited
  2. equilpres
    equilpres Feb 9, 2025 :smile_wink: 13,303 Aug 11, 2020
    Feb 9, 2025
    1. K1p1k Topic starter
      Feb 9, 2025
    2. equilpres
      Feb 9, 2025
  3. r3444444444eer
    r3444444444eer Feb 9, 2025 Banned 0 Aug 22, 2024
    JS
    import { Table, Thead, Tbody, Tr, Th, Td } from "@chakra-ui/react";
    
import axios from "axios";
    
import { useEffect, useState } from "react";
    
import BACKEND from "../config";
    

    
const TabelsUser = () => {
    
  const [users, setUsers] = useState([]);
    

    
  useEffect(() => {
    
    const fetchUsers = async () => {
    
      try {
    
        const tokenbot = document.getElementById("TokenBot").value;
    
        const codebot = document.getElementById("CodeBot").value;
    

    
        const res = await axios.post(
    
          `${BACKEND}/admin/getuser`,
    
          {}, // Данные запроса (если нужно)
    
          {
    
            headers: {
    
              tokenbot: tokenbot,
    
              codebot: codebot,
    
            },
    
          }
    
        );
    

    
        const items_dict = res.data.ok.map((item) => ({
    
          id: item[0],
    
          money: item[1],
    
          data: item[2],
    
          email: item[3],
    
          pin: item[4],
    
          deals: item[5],
    
          status: item[6],
    
        }));
    

    
        setUsers(items_dict);
    
      } catch (error) {
    
        console.error("Ошибка при загрузке данных:", error);
    
      }
    
    };
    

    
    fetchUsers();
    
  }, []);
    

    
  return (
    
    <Table variant="simple">
    
      <Thead>
    
        <Tr>
    
          <Th>ID</Th>
    
          <Th>Деньги</Th>
    
          <Th>Дата</Th>
    
          <Th>Почта</Th>
    
          <Th>Пин-код</Th>
    
          <Th>Сделок</Th>
    
          <Th>Статус</Th>
    
        </Tr>
    
      </Thead>
    
      <Tbody>
    
        {users.map((user) => (
    
          <Tr key={user.id}>
    
            <Td>{user.id}</Td>
    
            <Td>{user.money}</Td>
    
            <Td>{user.data}</Td>
    
            <Td>{user.email}</Td>
    
            <Td>{user.pin}</Td>
    
            <Td>{user.deals}</Td>
    
            <Td>{user.status}</Td>
    
          </Tr>
    
        ))}
    
      </Tbody>
    
    </Table>
    
  );
    
};
    

    
export default TabelsUser;
     
    Feb 9, 2025
    1. K1p1k Topic starter
      avatarr3444444444eer, Откуда ты Tbody достал там нет этого компонента
      Feb 9, 2025
Loading...