时间戳

首页 > 解决方案 > React - 显示帖子详细信息

reactjs - React - 显示帖子详细信息

问题描述

我创建了页面来显示帖子详细信息。我可以在控制台中看到所有正确的数据，但页面上没有呈现任何内容。我究竟做错了什么？

import React, { useState, useEffect } from "react";

function ProductDetail({ match }) {
    useEffect(() => {
        fetchItem();
        console.log(match);
    }, []);

    const [item, setItem] = useState({});

    const fetchItem = async () => {
        const data = await fetch(`http://amb.local/posts/${match.params.id}`);
        const item = await data.json();
        console.log(item);
        setItem(item);
    };

    return (
        <div>
            <h2>Post detail</h2>
            <h3> 
              {item.title}
            </h3>
        </div>
    );
}

export default ProductDetail;

标签： reactjs

解决方案

您应该尝试让详尽的 deps为您的开发环境工作，因为现在您的效果缺少您显然不知道的依赖项。修复依赖关系会导致 ProductDetail 每次都重新渲染。

这是一个如何做到这一点的示例：

function ProductDetail({ match }) {
  const [item, setItem] = React.useState({});
  React.useEffect(() => {
    fetch(
      `https://jsonplaceholder.typicode.com/todos/${match}`
    )
      .then(response => response.json())
      .then(todo => setItem(todo));
  }, [match]);

  return (
    <div>
      <h2>Post detail for {item.id}</h2>
      <h3>{item.title}</h3>
    </div>
  );
}
const ProductSelector = () => {
  const [selected, setSelected] = React.useState(1);
  return (
    <div>
      <select
        value={selected}
        onChange={e => setSelected(e.target.value)}
      >
        {[1, 2, 3, 4, 5, 6].map(id => (
          <option key={id} value={id}>
            {id}
          </option>
        ))}
      </select>
      <ProductDetail match={selected} />
    </div>
  );
};

ReactDOM.render(
  <ProductSelector />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

推荐阅读