Как сделать GET запрос по id?

Question

У меня есть API запрос, как мне сделать так, чтобы к определённому айди выводилась нужная карточка?

Пробовал добавить к API url ${id}, но не получилось, нужна помощь.

Мой код:

// Default.js
import React from "react";
import { Link } from "react-router-dom";

class Details extends React.Component {
  // Constructor
  constructor(props) {
    super(props);

    this.state = {
      items: [],
    };
  }

    componentDidMount = () => {
        return fetch(`https://jsonplaceholder.typicode.com/todos`)
        .then((res) => res.json())
        .then((json) => {
          this.setState({
            items: json,
          });
        });
    };
    render() {
      const { items } = this.state;
        return (
            <div>
              {items.map((item) => {
                return (
                  <div key={item.id}>
                    <div>
                      <h1>Details Page</h1>
                      <p>
                        <strong>Status:</strong> {item.status}
                      </p>
                      <p>
                        <strong>ID:</strong> {item.id}
                      </p>
                      <p>
                        <strong>Title:</strong> {item.title}
                      </p>
                      <p>
                        <strong>UserID:</strong> {item.userId}
                      </p>
                    </div>
                  </div>
                );
              })}
              <div>
                <Link target="self" to="/">
                  Home
                </Link>
              </div>
            </div>
          );
    }
}

export default Details;

// App.js
import React from 'react';
import { Route, Switch } from 'react-router-dom';

import './App.css';

import Home from '../pages/Home';
import Details from '../pages/Details';

function App() {
  return (
    <div className="App">
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/details/:id' component={Details} />
      </Switch>
    </div>
  );
}

export default App;

Результат при переходе по http://localhost:3000/details/1

Details Page
Status:

ID: 1

Title: delectus aut autem

UserID: 1

Details Page
Status:

ID: 2

Title: quis ut nam facilis et officia qui

UserID: 1

Details Page
Status:

ID: 3

Title: fugiat veniam minus

UserID: 1

Details Page
Status:

ID: 4

Title: et porro tempora

UserID: 1

Details Page
Status:

ID: 5

Title: laboriosam mollitia et enim quasi adipisci quia provident illum

UserID: 1

Details Page
Status:

ID: 6

Title: qui ullam ratione quibusdam voluptatem quia omnis

UserID: 1

Details Page
Status:

ID: 7

Title: illo expedita consequatur quia in

UserID: 1

Details Page
Status:

ID: 8

Title: quo adipisci enim quam ut ab

UserID: 1

Details Page
Status:

ID: 9

Title: molestiae perspiciatis ipsa

UserID: 1

Details Page
Status:

ID: 10

Title: illo est ratione doloremque quia maiores aut

UserID: 1

Details Page
Status:

ID: 11

Title: vero rerum temporibus dolor

UserID: 1

Details Page
Status:

ID: 12

Title: ipsa repellendus fugit nisi

UserID: 1

Details Page
Status:

ID: 13

Title: et doloremque nulla

UserID: 1

Details Page
Status:

ID: 14

Title: repellendus sunt dolores architecto voluptatum

UserID: 1

Details Page
Status:

ID: 15

Title: ab voluptatum amet voluptas

UserID: 1

Details Page
Status:

ID: 16

Title: accusamus eos facilis sint et aut voluptatem

UserID: 1

Details Page
Status:

ID: 17

Title: quo laboriosam deleniti aut qui

UserID: 1

Details Page
Status:

ID: 18

Title: dolorum est consequatur ea mollitia in culpa

UserID: 1

Details Page
Status:

ID: 19

Title: molestiae ipsa aut voluptatibus pariatur dolor nihil

UserID: 1

Details Page
Status:

ID: 20

Title: ullam nobis libero sapiente ad optio sint

UserID: 1

Details Page
Status:

ID: 21

Title: suscipit repellat esse quibusdam voluptatem incidunt

UserID: 2

Details Page
Status:

ID: 22

Title: distinctio vitae autem nihil ut molestias quo

UserID: 2

Details Page
Status:

ID: 23

Title: et itaque necessitatibus maxime molestiae qui quas velit

UserID: 2

Details Page
Status:

ID: 24

Title: adipisci non ad dicta qui amet quaerat doloribus ea

UserID: 2

Details Page
Status:

ID: 25

Title: voluptas quo tenetur perspiciatis explicabo natus

UserID: 2

Details Page
Status:

ID: 26

Title: aliquam aut quasi

UserID: 2

Details Page
Status:

ID: 27

Title: veritatis pariatur delectus

UserID: 2

Details Page
Status:

ID: 28

Title: nesciunt totam sit blanditiis sit

UserID: 2

Details Page
Status:

ID: 29

Title: laborum aut in quam

UserID: 2

Details Page
Status:

ID: 30

Title: nemo perspiciatis repellat ut dolor libero commodi blanditiis omnis

UserID: 2

Details Page
Status:

ID: 31

Title: repudiandae totam in est sint facere fuga

UserID: 2

Details Page
Status:

ID: 32

Title: earum doloribus ea doloremque quis

UserID: 2

Details Page
Status:

ID: 33

Title: sint sit aut vero

UserID: 2

Details Page
Status:

ID: 34

Title: porro aut necessitatibus eaque distinctio

UserID: 2

Details Page
Status:

ID: 35

Title: repellendus veritatis molestias dicta incidunt

UserID: 2

Details Page
Status:

ID: 36

Title: excepturi deleniti adipisci voluptatem et neque optio illum ad

UserID: 2

Details Page
Status:

ID: 37

Title: sunt cum tempora

UserID: 2

Details Page
Status:

ID: 38

Title: totam quia non

UserID: 2

Details Page

Ожидаемый результат при переходе по http://localhost:3000/details/1 :

Details Page
Status:

ID: 1

Title: delectus aut autem

UserID: 1

Answer 1

Так ведь вы даже id из роута не получаете и делаете запрос на все todo. В этом коде даже намека нету на то, что вы хотите сделать.

Вот примерно что вы хотите

export const Detail = () => {

  const {id} = useParams()
  const [todo, setTodo] = useState(null)

  useEffect(() => {
    const url = (id) => `https://jsonplaceholder.typicode.com/todos/${id}`

    fetch(url(id))
      .then(res => res.json())
      .then(res => setTodo(res))
  }, [])

  return (
    <div>
      {
        (todo)
          ? (
            <>
              <h1>Details Page</h1>
              <p>
                <strong>Status:</strong> {todo.status}
              </p>
              <p>
                <strong>ID:</strong> {todo.id}
              </p>
              <p>
                <strong>Title:</strong> {todo.title}
              </p>
              <p>
                <strong>UserID:</strong> {todo.userId}
              </p>
            </>
          )
          : <h1>Загрузка</h1>
      }
    </div>
  )
}

БЛОГ НА HUSL

Как сделать GET запрос по id?

Ответы (1 шт):