我正在嘗試使用從后端獲取的資料創建一個簡單的 Next.js 頁面。對于獲取，我正在使用 useSWR。
如果我在運行 dev 后第一次重繪 頁面或打開它，我會收到 TypeScript 錯誤，因為 data.results（獲取的物件的資料）物件未定義。這讓我相信 API 無法正常作業或獲取功能配置錯誤。然而這兩種情況都不是。
如果我評論具有獲取物件 (data.results) 的 2 行，并從瀏覽器重繪 ，我可以看到一個空頁面，這并不奇怪。在那之后，如果我取消注釋 console.log( data.results[1].name) 并保存更改，我可以在瀏覽器控制臺中看到產品的名稱。第二次提到 data.results 也是如此。很明顯，資料獲取是有效的，因為我可以在某些情況下看到資料。在這種狀態下，如果我點擊主頁按鈕，然后點擊主頁中的 Prods 按鈕回傳，它仍然有效。它在控制臺和頁面中顯示資料。所以只要我不重繪 它作業的頁面。
之后（不評論這兩行），如果我從瀏覽器重繪 頁面，我會再次收到 TypeError。
TypeScript 錯誤截圖
在我嘗試使用 useSWR 之前， useEffect 和 useState 用于相同的目的，但發生了同樣的事情。我也使用了公理，但沒有任何改變。總之，無論我多么努力，我都無法使用從后端獲取的內容創建一個簡單的頁面。我覺得我缺少基本知識。在問這個問題之前，我瀏覽了幾頁檔案，但什么也沒有。
在下面的代碼中，我嘗試將一個按鈕呈現到主頁和第二個產品的名稱。我在上面提到的使用 data.results 的 2 行附近有評論。在 index.js 中只有一個鏈接到這個 Prods 頁面的按鈕。
import React, { useEffect, useState } from 'react';
import useSWR from 'swr'
import Link from "next/link"
import {Button} from '@mantine/core';
const fetcher = async (url, headers) => await fetch(url, {'method': 'GET', headers}).then(res => res.json())
function Prods() {
const product_url = 'http://127.0.0.1:8000/api/product/'
const headers = {
'Content-type': 'application/json',
'Authorization': `Token 9824eda0dd38b631b4aedf192899651cba91be53`
}
const { data, error } = useSWR([product_url, headers], fetcher)
console.log(data.results[1].name) //if commented, refreshed and then uncommented it works.
return (
<div>
<Link href="/" passHref>
<Button className = "m-1">
Homepage
</Button>
</Link>
{/* {data.results[1].name} //if commented, refreshed and then uncommented it works. */}
</div>
)
}
export default Prods
uj5u.com熱心網友回復：
您是否為此嘗試過服務器端渲染？如果您從后端獲取資料，getServerSideProps 是在 Next 應用程式中執行此操作的正確位置。
import { GetServerSideProps } from "next";
...
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const fetcher = async (url, headers) => await fetch(url, {'method': 'GET', headers}).then(res => res.json())
const product_url = 'http://127.0.0.1:8000/api/product/'
const headers = {
'Content-type': 'application/json',
'Authorization': `Token 9824eda0dd38b631b4aedf192899651cba91be53`
}
const { data, error } = useSWR([product_url, headers], fetcher)
console.log(data.results[1].name)
return {
props: {}
}
}
export default Prods
您不會在瀏覽器的控制臺選項卡上看到控制臺輸出，而是查看您的 IDE 終端。
或者，我會像下面那樣做
import useSWR from 'swr'
import Link from "next/link"
import {Button} from '@mantine/core';
function Prods() {
const fetcher = async (url, headers) => await fetch(url, {'method': 'GET', headers}).then(res => res.json())
const product_url = 'http://127.0.0.1:8000/api/product/'
const headers = {
'Content-type': 'application/json',
'Authorization': `Token 9824eda0dd38b631b4aedf192899651cba91be53`
const { data, error } = useSWR([product_url, headers], fetcher)
if (error) {
return(<p>Loading failed...</p>);
}
if (!data) {
return(<h1>Loading...</h1>);
}
return (
<div>
<Link href="/" passHref>
<Button className = "m-1">
Homepage
</Button>
</Link>
{data.results[1].name}
</div>
);
}
export default Prods
或者
import useSWR from 'swr'
import Link from "next/link"
import {Button} from '@mantine/core';
function Prods() {
const fetcher = async (url, headers) => await fetch(url, {'method': 'GET', headers}).then(res => res.json())
const product_url = 'http://127.0.0.1:8000/api/product/'
const headers = {
'Content-type': 'application/json',
'Authorization': `Token 9824eda0dd38b631b4aedf192899651cba91be53`
const { data, error } = useSWR([product_url, headers], fetcher)
let pageContent;
if (error) {
pageContent = (<p>Loading failed...</p>);
}
else if (!data) {
pageContent = (<h1>Loading...</h1>);
}
else {
pageContent = (<p>data.results[1].name</p>);
}
return (
<div>
<Link href="/" passHref>
<Button className = "m-1">
Homepage
</Button>
</Link>
{pageContent}
</div>
);
}
export default Prods
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/457647.html
標籤：javascript 反应 下一个.js