0

У меня есть 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

1 ответ 1

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>
  )
}
1
  • случайно нажал отправить, писал ответ.
    – Dissmind
    31 авг 2022 в 9:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.