如何使用 uuid4() 創建路徑

Question

我用 api 創建了一個項目。 使用類別可以更改傳入的數據，但是當我單擊 newsItem 卡時，我希望獲得更詳細的信息。 那個 api 沒有 id 值，所以我使用了 uuid。 與 id 值對應的信息應與useParams一起提供。 但它不起作用。 我該如何解決這個問題？

Answer 1

第一個問題是您在呈現state數組時生成 GUID，該數組不一定與您在NewsDetail組件中嘗試匹配/過濾的任何數據相關。

state.map((data,index) => (
  <NewsItem
    imageUrl={data.imageUrl}
    author={data.author}
    title={data.title}
    content={data.content}
    date={data.date}
    id={uuidv4()} // <-- new id each render cycle
    key={index}
  />
))

您希望在獲取數據時注入id屬性，以便它是一個穩定的引用，與數據一樣長。 換句話說，它應該是數據的內在屬性。

例子：

const fetchValue = async (category) => {
  setLoading(true);

  try {
    const res = await fetch(`https://inshorts-api.herokuapp.com/news?category=${category}`);
    const { data } = await res.json();
    setState(data.map(el => ({
      ...el,
      id: uuidv4(), // <-- map and inject id here
    })));
  } catch(error) {
    console.log(error);
  } finally {
    setLoading(false);
  }
};

...

state.map((data) => (
  <NewsItem
    key={data.id} // <-- use as React key
    data={data} // <-- pass entire data object as prop
  />
))

新聞項目

const NewsItem = ({ data }) => {
  const { imageUrl, title, author, content, date, id } = data;

  return (
    ...
  );
};

新聞詳情

const NewsDetail = ({ state }) => {
  const { id } = useParams();

  return (
    <div>
      {state
        .filter((card) => card.id === id)
        .map((card) => (
          <div className="card" key={card.id}>
            <h2>{card.title}</h2>
            <h2>{card.content}</h2>
            <img src={card.imageUrl} alt="" />
          </div>
        ))
      }
    </div>
  );
};