Невозможно отобразить таблицу в Reactjs
Я пытаюсь найти API (образец ответа ), который дает список объектов и отображает его в таблице в ответ. Ниже приведен мой код. Я получаю сообщение об ошибке data is not defined
Вот код, когда я жестко запрограммировал данные, таблица отрисовалась идеально
import React, { useEffect, useState } from "react";
function renderTableData() {
return data.map((student, index) => {
const { config, text, source_link, tab_type } = student //destructuring
return (
<tr key = {config}>
<td>{config}</td>
<td>{text}</td>
<td>{source_link}</td>
<td>{tab_type}</td>
</tr>
)
})
}
const useFetch = (url) => {
const [data, setData] = useState('');
const [loading, setLoading] = useState(true);
useEffect(async () => {
const response = await fetch(url, {
method: 'GET',
})
const data = await response.json()
console.info(data)
setData(data)
setLoading(false)
}, []);
return { data, loading };
}
export default function CreateTestcaseStep2() {
const { data, loading } = useFetch(ENPOINT_URL_GOES_HERE)
return (
<div>
<h1 id='title'>React Dynamic Table</h1>
<table id='students'>
<tbody>
{renderTableData()}
</tbody>
</table>
</div>
);
}
Пожалуйста, предложите, где я делаю неправильно, поскольку функция renderTableData не может получить объект data.
Также попробуйте инициализировать данные по умолчанию как пустой массив, например const [data, setData] = useState({data:[]}); таким образом вы можете вернуться ( {data.lenght > 0 && ....
Передайте данные в свою функцию renderTableData().
@ToddSkelton Я тоже пробовал это {renderTableData({data})}, но это не работает, выдает ошибку data.map is not a function
Ответы 2
Я реорганизую ваш пример.
Не используйте
useEffectasyc.
useEffect(() => {
axios.get(url).then((response) => {
setData(response);
setLoading(false);
});
}, [url]);
Если вы хотите создать тело таблицы с функцией, вам необходимо передать данные с помощью параметров.
const renderTableData = (data) => {
// ^^^^ Pass data using function parameters,
// this function it's possible to use in another table with the same data
return data?.map((student) => {
const { id, name, username, email } = student;
return (
<tr key = {id}>
<td>{name}</td>
<td>{username}</td>
<td>{email}</td>
</tr>
);
});
};
Чтобы отобразить тело таблицы с состоянием передачи функции
<tbody>{renderTableData(data)}</tbody>
// ^^^^ Passing state to render table body
Посмотрите живую демонстрацию, передайте данные в функцию, используя параметры:
renderTableData определен вне вашего функционального компонента, и вы ссылаетесь на переменную data внутри него, я полагаю, он не знает, на какую переменную data ссылаться? Я удивлен, что вы не получили ошибку об этом.
Попробуйте передать в функцию переменную data в качестве параметра.
Я передал данные и получаю эту ошибку i.imgur.com/0vPPfTQ.png
@Mahesh Пожалуйста, сначала запустите данные console.info, чтобы увидеть, что вы передаете
@Mahesh ах, вероятно, это происходит потому, что в первый раз он не инициализируется, попробуйте использовать [] в пользовательском хуке в качестве начального значения для данных.
в консоли данные выводятся пустой строкой '' (без кавычек)
@Mahesh, это до того, как ты что-то настроил. Используйте начальное значение [] вместо '' в useState.
просто заменил [] вместо '', и данные отобразились отлично. Большое спасибо @giorgim
Карта @Mahesh — это функция, которую следует вызывать для массива, а не для строки.
понятно. Спасибо... и последнее... Я получаю это предупреждение... можно ли его игнорировать?i.imgur.com/sA5P9qr.png или мне нужно с этим справиться?
@Mahesh Лучше не игнорировать это, вот кое-что об этом: reactjs.org/docs/lists-and-keys.html
конечно. Спасибо за вашу своевременную помощь. Теперь у меня мало уверенности в обработке данных с помощью хуков.
@Mahesh Добро пожаловать, удачи! (поэтому проблема заключалась в том, что до поступления данных от fetch вы передавали '' методу).
Может быть, fetch(..).then(response => response.json()).then(json => {...})