Question

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

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;

Answer 1

您应该尝试使exhaustive deps在您的开发环境中工作，因为现在您的效果缺少了您显然不知道的依赖项。修复依赖关系将导致ProductDetail每次都重新呈现。

以下是您如何执行此操作的示例：

dv = DataValidation(type='list', formula="{0}!$B$2:$B$18".format(quote_sheetname('values')))
ws.add_data_validation(dv)

row = 3
while row <= ws.max_row:
    dv.add('F{}'.format(row))
    row += 1

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')
);

React-显示帖子详细信息

1 个答案: