Мой компонент не повторно опускает содержимое

Javascript. Цифровое Кемерово

Перейти к содержимому

  • Меню
    • Темы без ответов
    • Активные темы
    • Поиск
    • Мобильная версия Мобильная версия
  • Вход
  • Регистрация
  • Форум программистов Кемерово-IT Javascript
  • Расширенный поиск
  • Поиск

Мой компонент не повторно опускает содержимое

⇐ Javascript
Форум по Javascript
Ответить Пред. темаСлед. тема
Расширенный поиск
1 сообщение • Страница 1 из 1
Anonymous
 Мой компонент не повторно опускает содержимое
  • Цитата

Сообщение Anonymous » 01 фев 2025, 03:48

Я пытаюсь создать крючок в моем приложении, сделанном в приложении Create React, но при обновлении константы, содержащей информацию, компонент, который показывает список на экране, не отображается снова, но список обновляется, поскольку Крюк возвращает его в консоли (стоит упомянуть, что при загрузке компонента в первый раз он правильно отображается, но не обновляется при изменении информации).

Список продаж

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

import React, { use, useState, useEffect } from 'react';
import { Table } from 'antd';
import UpdateList from '../hooks/updateList';

const SalesList = () => {
const { list, loading, error, updateList } = UpdateList();

useEffect(() => {
updateList();
}, []); /* If I add updateList within the [], it works, but it enters an infinite loop */

useEffect(() => {
console.log('List updated in the component:', list);
}, [list]);

const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Price',
dataIndex: 'price',
key: 'price',
},
{
title: 'Quantity',
dataIndex: 'quantity',
key: 'quantity',
},
{
title: 'Amount Received',
dataIndex: 'amountReceived',
key: 'amountReceived',
},
];

if (loading) return Loading...;
if (error) return Error: {error.message};

return ;
};

export default SalesList;
UpdateList

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

import { useState, useEffect } from 'react';
import useFetchData from '../services/api/showData';

const UpdateList = () => {
const { data, loading, error, fetchData } = useFetchData();
const [list, setList] = useState([]);

const updateList = async () => {
try {
const newList = await fetchData();
setList([...newList]);
console.log('New list obtained:', newList);
} catch (error) {
console.error('An error occurred while updating your data', error);
}
};

useEffect(() => {
updateList();
}, [fetchData]);

return { list, loading, error, updateList };
};

export default UpdateList;
showdata

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

import { useState, useEffect, useCallback } from "react";
import axios from 'axios';

const useFetchData = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

const fetchData = useCallback(async () => {
setLoading(true);
try {
const response = await axios('http://localhost/REACT/my-app/src/backend/php/api/mostrarDatos.php');
if (!response.data.ok) {
return console.error('An error occurred, please restart. If the issue persists, contact the administrator.');
}
setData(response.data.respuesta);
return response.data.respuesta;
} catch (error) {
setError(error instanceof Error ? error : new Error("An unknown error occurred"));
console.error("Error fetching data:", error);
return [];
} finally {
setLoading(false);
}
}, []);

useEffect(() => {
fetchData();
}, [fetchData]);

return { data, error, fetchData };
};

export default useFetchData;
Мне нужно, что при обновлении постоянной lista , компонента, который создает таблицу, обновляется, крюк работает, но он не является повторным использованием данных.

Подробнее здесь: https://stackoverflow.com/questions/794 ... s-of-table
Вернуться к началу
Реклама
1738370902
Anonymous
 Я пытаюсь создать крючок в моем приложении, сделанном в приложении Create React, но при обновлении константы, содержащей информацию, компонент, который показывает список на экране, не отображается снова, но список обновляется, поскольку Крюк возвращает его в консоли (стоит упомянуть, что при загрузке компонента в первый раз он правильно отображается, но не обновляется при изменении информации).

[b] Список продаж [/b]
[code]import React, { use, useState, useEffect } from 'react';
import { Table } from 'antd';
import UpdateList from '../hooks/updateList';

const SalesList = () => {
const { list, loading, error, updateList } = UpdateList();

useEffect(() => {
updateList();
}, []); /* If I add updateList within the [], it works, but it enters an infinite loop */

useEffect(() => {
console.log('List updated in the component:', list);
}, [list]);

const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Price',
dataIndex: 'price',
key: 'price',
},
{
title: 'Quantity',
dataIndex: 'quantity',
key: 'quantity',
},
{
title: 'Amount Received',
dataIndex: 'amountReceived',
key: 'amountReceived',
},
];

if (loading) return Loading...;
if (error) return Error: {error.message};

return ;
};

export default SalesList;
[/code]
[b] UpdateList [/b]
[code]import { useState, useEffect } from 'react';
import useFetchData from '../services/api/showData';

const UpdateList = () => {
const { data, loading, error, fetchData } = useFetchData();
const [list, setList] = useState([]);

const updateList = async () => {
try {
const newList = await fetchData();
setList([...newList]);
console.log('New list obtained:', newList);
} catch (error) {
console.error('An error occurred while updating your data', error);
}
};

useEffect(() => {
updateList();
}, [fetchData]);

return { list, loading, error, updateList };
};

export default UpdateList;
[/code]
[b] showdata [/b]
[code]import { useState, useEffect, useCallback } from "react";
import axios from 'axios';

const useFetchData = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

const fetchData = useCallback(async () => {
setLoading(true);
try {
const response = await axios('http://localhost/REACT/my-app/src/backend/php/api/mostrarDatos.php');
if (!response.data.ok) {
return console.error('An error occurred, please restart. If the issue persists, contact the administrator.');
}
setData(response.data.respuesta);
return response.data.respuesta;
} catch (error) {
setError(error instanceof Error ? error : new Error("An unknown error occurred"));
console.error("Error fetching data:", error);
return [];
} finally {
setLoading(false);
}
}, []);

useEffect(() => {
fetchData();
}, [fetchData]);

return { data, error, fetchData };
};

export default useFetchData;
[/code]
Мне нужно, что при обновлении постоянной [b] lista [/b], компонента, который создает таблицу, обновляется, крюк работает, но он не является повторным использованием данных.

Подробнее здесь: [url]https://stackoverflow.com/questions/79404250/my-component-does-not-re-render-the-contents-of-table[/url]
Ответить Пред. темаСлед. тема
1 сообщение • Страница 1 из 1

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми. Можно прикреплять файлы, перетаскивая их в окно сообщения.

Максимально разрешённый размер вложения: 15 МБ.

Имя файла Комментарий к файлу Размер Статус
 

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • Укладка элементов div по вертикали при использовании display:table, table-row, table-cell
    Последнее сообщение Anonymous « 27 май 2024, 23:51
    Добавлено в форуме CSS
    Anonymous » 27 май 2024, 23:51 » в форуме CSS
    У меня есть следующий HTML-код:

    Item 1
    Button

    Item 2

    Item 3

    Item 4

    и соответствующий CSS здесь:
    .menu {
    display: table;
    }
    .menu-item {
    display: table-row;
    vertical-align: middle;
    /* following properties are for debugging purposes */...
    0 Ответы
    131 Просмотры
    Последнее сообщение Anonymous
    27 май 2024, 23:51
  • Ef core enum to table table table intrond
    Последнее сообщение Anonymous « 07 мар 2025, 13:12
    Добавлено в форуме C#
    Anonymous » 07 мар 2025, 13:12 » в форуме C#
    У меня есть модель со свойством enum. Это свойство имеет пользовательский перечисление для преобразователя строки, определенного в конфигурации Code-Pryst EF Core. У меня также есть класс таблицы поиска для этого перечисления, который также имеет...
    0 Ответы
    34 Просмотры
    Последнее сообщение Anonymous
    07 мар 2025, 13:12
  • Как выровнять содержимое mat-table/table по верху ячейки?
    Последнее сообщение Anonymous « 23 май 2024, 15:08
    Добавлено в форуме CSS
    Anonymous » 23 май 2024, 15:08 » в форуме CSS
    Например, как в этом примере приложения: Ссылка
    У меня есть таблица, в которой все данные в ячейках имеют разную высоту, но вместо выравнивания содержимого по центру. >
    Я хочу выровнять содержимое каждой ячейки по верху, чтобы буквы «А»...
    0 Ответы
    70 Просмотры
    Последнее сообщение Anonymous
    23 май 2024, 15:08
  • Команда Mysqldump опускает коллекцию в выводе
    Последнее сообщение Anonymous « 30 янв 2025, 17:55
    Добавлено в форуме MySql
    Anonymous » 30 янв 2025, 17:55 » в форуме MySql
    Когда я запускаю MySqldump, вывод не включает в себя таблицу по умолчанию для некоторых таблиц. Как мне включить сопоставление для всех таблиц?

    Подробнее здесь:
    0 Ответы
    17 Просмотры
    Последнее сообщение Anonymous
    30 янв 2025, 17:55
  • Мутаторы Laravel (<модель>::все работают, DB::table()->get() нет)
    Последнее сообщение Anonymous « 01 ноя 2024, 14:30
    Добавлено в форуме Php
    Anonymous » 01 ноя 2024, 14:30 » в форуме Php
    В моей модели1 есть мутаторы этого типа, которые заменяют десятичный разделитель точкой с запятой:
    protected function fee(): Attribute{
    return Attribute::make(
    get: fn (?string $value) => str_replace('.', ',', $value) ?: 0,
    set: fn (?string $value)...
    0 Ответы
    24 Просмотры
    Последнее сообщение Anonymous
    01 ноя 2024, 14:30

    Вернуться в «Javascript»

    Перейти
    • Кемерово-IT
    • ↳   Javascript
    • ↳   C#
    • ↳   JAVA
    • ↳   Elasticsearch aggregation
    • ↳   Python
    • ↳   Php
    • ↳   Android
    • ↳   Html
    • ↳   Jquery
    • ↳   C++
    • ↳   IOS
    • ↳   CSS
    • ↳   Excel
    • ↳   Linux
    • ↳   Apache
    • ↳   MySql
    • Детский мир
    • Для души
    • ↳   Музыкальные инструменты даром
    • ↳   Печатная продукция даром
    • Внешняя красота и здоровье
    • ↳   Одежда и обувь для взрослых даром
    • ↳   Товары для здоровья
    • ↳   Физкультура и спорт
    • Техника - даром!
    • ↳   Автомобилистам
    • ↳   Компьютерная техника
    • ↳   Плиты: газовые и электрические
    • ↳   Холодильники
    • ↳   Стиральные машины
    • ↳   Телевизоры
    • ↳   Телефоны, смартфоны, плашеты
    • ↳   Швейные машинки
    • ↳   Прочая электроника и техника
    • ↳   Фототехника
    • Ремонт и интерьер
    • ↳   Стройматериалы, инструмент
    • ↳   Мебель и предметы интерьера даром
    • ↳   Cантехника
    • Другие темы
    • ↳   Разное даром
    • ↳   Давай меняться!
    • ↳   Отдам\возьму за копеечку
    • ↳   Работа и подработка в Кемерове
    • ↳   Давай с тобой поговорим...
    • Форум программистов
    • Мобильная версия
    • Часовой пояс: UTC+03:00
    • Удалить cookies

    Создано на основе phpBB® Forum Software © phpBB Limited Русская поддержка phpBB



    Time: 0.437s | Peak Memory Usage: 2.35 МБ | GZIP: On

     

     


    Яндекс.Метрика
    Programmiererforum