如何使用 uuid4() 创建路径答案

【问题标题】：How can i create path with uuid4()如何使用 uuid4() 创建路径
【发布时间】：2022-08-16 23:52:49
【问题描述】：

新闻详情

import React, { useState, useEffect } from \'react\'
import { useParams } from \'react-router-dom\'

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

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

export default NewsDetail

新闻项目

import React from \'react\'
import clock from \"../components/assets/img/Clock.svg\"
import user from \"../components/assets/img/User.svg\"
import { Link } from \'react-router-dom\'

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

  return (
    <Link className=\"col-lg-4 p-2\" to={`/detail/${id}`}>
      <div className=\"newsItem\">
        <img src={imageUrl} alt=\'newsPhoto\' />
        <h2>{id}</h2>
        <div className=\"itemBody\">
          <p className=\'title\'>{title}</p>
          <div className=\"line\"></div>
          <p className=\'content\'>{content}</p>
          <div className=\"itemfooter\">
            <span><img src={clock} alt=\'clock\' />{date}</span>
            <span><img src={user} alt=\'user\' />{author}</span>
          </div>
        </div>
      </div>
    </Link>
  )
}

export default NewsItem

家

import React, { useEffect, useState } from \"react\";
import NewsItem from \"./NewsItem\";
import SpinnerLoad from \"./SpinnerLoad\";
import { v4 as uuidv4 } from \'uuid\';

const Home = (props) => {
  const Category = [
    \"all\",
    \"business\",
    \"sports\",
    \"world\",
    \"technology\",
    \"entertainment\",
    \"science\"
  ];
  const { state, setState} = props;
  const [loading, setLoading] = useState(false)

  const fetchValue = (category) => {
    fetch(`https://inshorts-api.herokuapp.com/news?category=${category}`)
      .then(res => res.json())
      .then(res => {
        setState(res.data)
        setLoading(true)
      })
      .catch((error) => console.log(error))
      console.log(state);
      setLoading(false);
  };

  // const fetchValue = async () => {
  //   try {
  //     const data = await axios
  //       .get(`https://inshorts-api.herokuapp.com/news?category=sports`)
  //       .then(res => {
  //         console.log(res);
  //         setState(res.data)
  //       })
  //     setLoading(true)
  //     console.log(loading);
  //   } catch (e) {
  //     console.log(e);
  //   }
  // }

  const CategoryButton = ({ category }) => (
    <button onClick={() => fetchValue(category)} style={{ textTransform: \'capitalize\' }}>{category}</button>
  );

  useEffect(() => {
    fetchValue(\'all\')
  },[])

  return (
    <>
      <div className=\"header-bg\">
        <h1 className=\"mb-3\">News</h1>
        <div className=\"btns \">
          {Category.map((value, index) => {
            return <CategoryButton category={value} key={index} />;
          })}
        </div>
      </div>

      <div className=\"news\">
        <div className=\"container\">
          <div className=\"row\">
            { 
            !loading 
            ? <SpinnerLoad/>
             :
            state.map((data,index) => {
              return (
                <NewsItem
                  imageUrl={data.imageUrl}
                  author={data.author}
                  title={data.title}
                  content={data.content}
                  date={data.date}
                  id={uuidv4()}
                  key={index}
                />
              );
            })
            }
          </div>
        </div>
      </div>
    </>
  );
};

export default Home;

我用 api 创建了一个项目。使用类别可以更改传入的数据，但是当我单击 newsItem 卡时，我希望获得更详细的信息。那个api没有id值，所以我用了uuid。 id 值对应的信息应该带有useParams。但它不起作用。我该如何解决这个问题？

标签： reactjs api react-hooks react-router uuid

【解决方案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>
  );
};

【讨论】：