reactjs - react 中的 fetch 不会从本地快速服务器返回子数组

Question

我有一个快速服务器，当我使用 Postman 发出获取请求时，它似乎工作正常，但是当我尝试使用 fetch 或 axios 进行反应时，我得到的只是 id 和 name。我也同步尝试过，结果相似。

当我对数据进行硬编码时，界面可以完美运行并显示所有优点/缺点。

这是 App.js，我在其中获取数据并将其传递给

import {useState, useEffect} from "react";
import { hot } from 'react-hot-loader/root'
import Header from "./components/header";
import Select from "./components/select.js";
import ProsCons from "./components/pros-cons.js";


function App(){
    const [catState,setCatState] = useState("");
    const [catPros, setCatPros] =  useState([]);
    const [catCons, setCatCons] =  useState([]);

    const [categories, setCategories] = useState([]);  
    
   
        
    useEffect( ()=> {
        async function GetCats(){ 
    
             const response = await fetch('/api/categories')
                const data = await response.json() 
                console.log(data)
                setCategories(data)
        }
        GetCats()
},[])
   
         
    const chooseCat = (e) => {
        const id = e.target.value;
        const selectedCat = categories.filter((cat) => cat.id === id)[0];
        if(selectedCat){
            const selectedPros = selectedCat.pros[0].split(',');
            const selectedCons = selectedCat.cons[0].split(',');
            setCatState(selectedCat);
            setCatPros(selectedPros);
            setCatCons(selectedCons);
        };
}
    return(
        <div className="container">
            
            <Header />
            <form>
             
            {categories.length > 0 ?
              <Select categories={categories}
                onSelect={chooseCat}
              />:' No Options'}
              {catState && <ProsCons pros={catPros} cons={catCons}/>}
                
            
            </form>
        </div>
    )
}
export default hot(App);

这就是 console.log 输出的样子

cons: (4) ["Bad acoustics", "bad service", "rude staff", "over priced"]
id: 1
name: "Restaurant"
pros: (4) ["Great Menu", "good food", "Great Beer list", "live music"]
__proto__: Object
1:
cons: ["Bad acoustics, bad crowd, small space, over priced"]
id: 2
name: "Music Venue"
pros: ["Good seating, Music Variety, Good Dance Floor, Good Bar, Good Food"]
__proto__: Object
2:
cons: ["Crowded, Horses/Bicycles, Burn Zone, Biting Bugs"]
id: 3
name: "Hiking Trail"
pros: ["Spectacular Scenery, Great Destination, Swimming, Drinking Water"]
__proto__: Object
3:
cons: (4) ["Upfront cost for use", "Inconsistent Interface", "Crashes Often", "Requires Excess Configuration"]
id: "5140c74f-91e3-4c23-803c-6966a623677d"
name: "Code Editors"
pros: (4) ["Great Community Support", "Intuitive interface", "Regularly Updated", "Support for many Code Languages"]
__proto__: Object
length: 4
__proto__: Array(0)

. 所有这些proto :object 都有一个可能是 js 属性的数组。这是一张图片

这是网络响应

[
    {
        "id": 1,
        "name": "Restaurant",
        "pros": ["Great Menu", "good food", "Great Beer list", "live music"],
        "cons": ["Bad acoustics", "bad service", "rude staff", "over priced"]
    },
    {
        "id": 2,
        "name": "Music Venue",
        "pros": [
            "Good seating, Music Variety, Good Dance Floor, Good Bar, Good Food"
        ],
        "cons": ["Bad acoustics, bad crowd, small space, over priced"]
    },
    {
        "id": 3,
        "name": "Hiking Trail",
        "pros": [
            "Spectacular Scenery, Great Destination, Swimming, Drinking Water"
        ],
        "cons": ["Crowded, Horses/Bicycles, Burn Zone, Biting Bugs"]
    },
    {
        "id": "5140c74f-91e3-4c23-803c-6966a623677d",
        "name": "Code Editors",
        "pros": [
            "Great Community Support",
            "Intuitive interface",
            "Regularly Updated",
            "Support for many Code Languages"
        ],
        "cons": [
            "Upfront cost for use",
            "Inconsistent Interface",
            "Crashes Often",
            "Requires Excess Configuration"
        ]
    }
]

当我在 Postman 中输入这个 http://localhost:8080/api/categories

我明白了

[
    {
        "id": 1,
        "name": "Restaurant",
        "pros": [
            "Great Menu",
            "good food",
            "Great Beer list",
            "live music"
        ],
        "cons": [
            "Bad acoustics",
            "bad service",
            "rude staff",
            "over priced"
        ]
    },
    {
        "id": 2,
        "name": "Music Venue",
        "pros": [
            "Good seating, Music Variety, Good Dance Floor, Good Bar, Good Food"
        ],
        "cons": [
            "Bad acoustics, bad crowd, small space, over priced"
        ]
    },
    {
        "id": 3,
        "name": "Hiking Trail",
        "pros": [
            "Spectacular Scenery, Great Destination, Swimming, Drinking Water"
        ],
        "cons": [
            "Crowded, Horses/Bicycles, Burn Zone, Biting Bugs"
        ]
    },
    {
        "id": 4,
        "name": "Code Editors",
        "pros": [
            "Great Community Support",
            "Intuitive interface",
            "Regularly Updated",
            "Support for many Code Languages"
        ],
        "cons": [
            "Upfront cost for use",
            "Inconsistent Interface",
            "Crashes Often",
            "Requires Excess Configuration"
        ]
    }
]

这就是我试图获取的方式。我有一个代理设置来完成网址，如果我添加一个新类别，名称会显示在界面中。

useEffect( ()=> {
        async function GetCats(){ 
    
             const response = await fetch('/api/categories')
                const data = await response.json()            
                setCategories(data)
        }
        GetCats()
},[])

请告诉我您还需要查看哪些其他代码

我认为这是数据中噪音过多的情况。关于它如何到达那里以及我如何摆脱它的任何想法

任何帮助，将不胜感激。谢谢

标签： reactjsexpressfetch