第二个 Instagram 按钮的 CSS 属性

Question

bdc1

Asked:2022-08-31 17:22:03 +0000 UTC2022-08-31 17:22:03 +0000 UTC 2022-08-31 17:22:03 +0000 UTC

如何通过 id 发出 GET 请求？

772

我有一个 API 请求，我怎样才能使它显示特定 ID 所需的卡片？

我尝试将 url ${id} 添加到 API，但它不起作用，我需要帮助。

我的代码：

// 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 个回答

Voted

Dissmind · Answer 1 · 2022-08-31T17:28:24Z

Best Answer

Dissmind

2022-08-31T17:28:24Z2022-08-31T17:28:24Z

所以毕竟，你甚至没有从路由中得到一个 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

如何通过 id 发出 GET 请求？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

如何通过 id 发出 GET 请求？

1 个回答

相关问题