Невозможно отобразить данные в Reactjs
Я новичок в реагировании и отлаживал это со вчерашнего дня, и я, наконец, решил опубликовать, так как не знаю, что происходит.
Следующий код реакции извлекает данные из API, а затем отображает их в пользовательском интерфейсе. Но здесь происходит несколько странных вещей.
Сначала я получаю сообщение об ошибке TypeError: Cannot read property 'map' of undefined, но когда я комментирую {renderTableData(data)} и сохраняю, а затем снова раскомментирую и сохраняю, the data is rendering perfectly on the UI
Я думаю, что еще до того, как данные будут получены из API, они передаются функции renderTableData, поэтому в консоли undefined печатается.
Вот код
export default function TenantList(){
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users').then((response)=>{
return response.json();
}).then((data)=>{
setData(data)
})
},[]);
function renderTableData(data) {
console.info("hello ", data)
return data.map((student, index) => {
const { name, email } = student //destructuring
return (
<tr key = {name}>
<td>{name}</td>
<td>{email}</td>
</tr>
)
})
}
return (
<>
<div>
{renderTableData(data)}
</div>
</>
)
}
Пожалуйста, предложите обходной путь
Если у вас есть useState([]);, этого не должно происходить, так как начальное значение data — это массив.
@aryanm Я написал console.info(data) перед setData, но ничего не распечаталось
@aryanm @Gabriele, Как предложил @jmargolisvt в ответе, когда я написал {data && renderTableData(data)} Он отлично отображается даже при обновлении страницы.
Без него должно работать. Что-то еще не так в вашем коде, если вы продолжаете получать эту ошибку. См. codeandbox.io/s/laughing-sun-1ukiw?file=/src/App.js это ваш код, и он отлично работает.
@GabrielePetrioli да, на codeandbox он работает нормально, но на моей локальной машине он дает такое поведение.
@GabrielePetrioli, но добавление {data && renderTableData(data)} в любом случае является дополнительным преимуществом, верно?
Конечно, вы также можете просто указать значение по умолчанию для аргумента, например function renderTableData(data = []) {.
@GabrielePetrioli спасибо. Когда я передам data = [], функция будет ждать, пока данные не будут пустыми?
Он не будет ждать (и не ждет сейчас), но если передан аргумент undefined, он станет [], что означает, что map будет доступен.
@GabrielePetrioli хорошо, понял
Ответы 1
Вы хотите запустить эту функцию только в том случае, если у вас есть данные, поэтому проверьте ее:
{data && renderTableData(data)}
Большое спасибо, чувак :) У меня буквально болит спина часами, чтобы понять это. Ты спаситель
Принял. Было ограничение по времени, чтобы принять ответ, поэтому я не мог этого сделать до сих пор.
Попробуйте добавить
console.info(data)в свой useEffect прямо перед строкойsetData(data)и скажите мне, что он регистрирует.