如何使用axiosget請求從json獲取id

我正在嘗試從 json 檔案中獲取 idrestaurant 用作識別符號，該檔案在資料庫上的 json 物件上具有這樣的資訊。東西在 PostgreSQL 上

這是一個學校專案的反應網站。我試過在控制臺日志上列印 response.data 但沒有任何顯示。

[{"idrestaurant":2,
"name":"Pizzeria Amigo",
"address":"Uusikatu 16",
"opening":"08:00",
"closing":"12:00",
"img":"testi.com/kuva.jpg",
"type":"fastfood",
"pricelvl":"3",
"owneruserid":1},
{"idrestaurant":3,
"name":"Burgers",
"address":"Katu 10",
"opening":"08:00",
"closing":"18:00",
"img":"testi.com/kuva.png",
"type":"fastfood",
"pricelvl":"1",
"owneruserid":1}]

我想使用 id 作為 idrestaurant 作為在Restaurant.js列印餐廳元素串列的唯一鍵。這是我一直在嘗試做的。

應用程式.js

import React, { useEffect, useState } from 'react'
import './App.css'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import NavBar from './components/navBar'
import Restaurants from './components/Restaurants'
import searchRestaurant from './components/Search'
import Restaurant from './components/Restaurant'
import axios from 'axios'

const App = () => {
  const [restaurants, setRestaurants] = useState([])

  useEffect(() => {
    axios.get('http://MadeUpURL-app.herokuapp.com/restaurants')
      .then((response) => {
        setRestaurants(response.data)
      });
  }, []);
  return (
    <Router>
      <div>
        <NavBar />
        <Routes>
          <Route path='/restaurants' element={<Restaurants restaurants={restaurants} />} >
            <Route path="/restaurants/idrestaurant" element={<Restaurant restaurants={restaurants} />} />
          </Route>
          {/* <Route path='/Search' element={<Search />} /> */}
        </Routes>
      </div>
    </Router>
  );

}

export default App

餐廳.js

import React from 'react'
import styles from './restaurants.module.css'
import Restaurant from './Restaurant'
import { Link } from 'react-router-dom'

const Restaurants = (props) => {
    return (
        <div className={styles.container}>
            <div className={styles.restaurantList}>
                {props.restaurants.map(restaurant => <Link to={restaurant.idrestaurant}>
                    <Restaurant key={restaurant.idrestaurant} />
                </Link>
                )}
            </div>
        </div>
    )
}

export default Restaurants

餐廳.js

import React from 'react'
import styles from './restaurant.module.css'

export default function Restaurant(props) {
    return (
        <div className={styles.shop}>
            <div>
                <div><img src={props.img} className={styles.imageSize} /></div>
                <div>
                    <div className={styles.title}>{props.name}</div>
                    <div className={styles.type}>{props.type}</div>
                    <div className={styles.prange}>{props.pricelvl}</div>
                </div>
            </div>
        </div>
    )
}

uj5u.com熱心網友回復：

最好在Restaurants組件內部呼叫 api 。因為setRestaurants需要時間來更新，state同時Restaurants組件將被渲染，所以餐館將是空的<Restaurants restaurants={restaurants} />

作業演示

這是 App.js 的代碼

import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Restaurants from "./components/Restaurants";
import Restaurant from "./components/Restaurant";
    
const App = () => {
  return (
    <Router>
      <div>
        <Routes>
          <Route path="/" element={<Restaurants />} />
          <Route path="/restaurants" element={<Restaurants />}>
            <Route path="/restaurants/idrestaurant" element={<Restaurant />} />
          </Route>
          {/* <Route path='/Search' element={<Search />} /> */}
        </Routes>
      </div>
    </Router>
  );
};

export default App;

這是 Restaurant.js 的代碼

import React, { useEffect, useState } from "react";
import Restaurant from "./Restaurant";
import { Link } from "react-router-dom";
import axios from "axios";

const Restaurants = (props) => {
  const [restaurants, setRestaurants] = useState([]);

  const jsonFakeData = [
    {
      idrestaurant: 2,
      name: "Pizzeria Amigo",
      address: "Uusikatu 16",
      opening: "08:00",
      closing: "12:00",
      img: "testi.com/kuva.jpg",
      type: "fastfood",
      pricelvl: "3",
      owneruserid: 1
    },
    {
      idrestaurant: 3,
      name: "Burgers",
      address: "Katu 10",
      opening: "08:00",
      closing: "18:00",
      img: "testi.com/kuva.png",
      type: "fastfood",
      pricelvl: "1",
      owneruserid: 1
    }
  ];

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users").then((response) => {
      console.log(response.data);
      //setRestaurants(response.data);
      setRestaurants(jsonFakeData);
    });
  }, []);

  return (
    <div>
      <div>
        {restaurants && restaurants.length > 0
          ? restaurants.map((restaurant) => (
              <Link key={restaurant.idrestaurant} to={restaurant.idrestaurant}>
                <Restaurant
                  restaurant={restaurant}
                  key={restaurant.idrestaurant}
                />
              </Link>
            ))
          : ""}
      </div>
    </div>
  );
};

export default Restaurants;

這是 Restaurant.js 的代碼

import React from "react";

export default function Restaurant(props) {
  console.log(props, "prps");
  return (
    <div>
      <div>
        <div>
          <img src={props.restaurant.img} alt="img" />
        </div>
        <div>
          <div>{props.restaurant.name}</div>
          <div>{props.restaurant.type}</div>
          <div>{props.restaurant.pricelvl}</div>
        </div>
      </div>
    </div>
  );
}

標籤：反应 json 公理 反应路由器

上一篇：jq決議復雜的json

下一篇：具有50個CIDRIP（入口）的安全組的Cloudformation模板（JSON）