Reactjs 使用键时复制组件

我正在尝试使用帧运动在React中制作组件旋转木马。

AnimatePresence

的子项需要一个键，因此我决定将页面状态作为键传递。但是，这样做会使我尝试渲染的组件重复。我认为这是因为键最终会被重复使用，所以我创建了一个函数，生成一个随机字符串用作键，但它也复制了组件

使用旋转木马的组件

const ProjectList = props => {

  const [page, setPage] = useState(0);

  const projects = [
    <Project 
      name="Example"
      desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Libero nunc consequat interdum varius sit amet."
      image={require("../img/exampleproject.png")}
    />,
    <Project 
      name="Example2"
      desc="Another example. This one does nothing too. What a suprise!"
      image={require("../img/exampleproject.png")}
    />
  ]

  const genKey = () => {
    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  }

  const paginate = (newPage) => {
    setPage(newPage)
  }

  return (
    
    <div className="project-list">
      <AnimatePresence>
        <motion.button key={genKey()} onClick={() => paginate(page-1)}>
          <ArrowBackIosIcon/>
        </motion.button>
        <motion.div key={genKey()} className="project-list"
          initial={{opacity: 0}}
          animate={{opacity: 1}}
          exit={{opacity: 0}}
        >
          {projects[page]}
        </motion.div>
        <motion.button key={genKey()} onClick={() => paginate(page+1)}>
          <ArrowForwardIosIcon/>
        </motion.button>
      </AnimatePresence>
    </div>
  );

constprojectlist=props=>{
const[page，setPage]=useState（0）；
施工项目=[
,
]
常量genKey=（）=>{
返回Math.random（）.toString（36）子字符串（2,15）+Math.random（）.toString（36）子字符串（2,15）；
}
常量分页=（新页）=>{
设置页面（新建页面）
}
返回(

当我不使用键时，它会按预期工作，但是每当我单击其中一个箭头按钮时，它就会抛出以下警告


p.S我知道最终页面值将超出
项目长度的范围，我计划在解决此问题后解决此问题。
实际上，此处不需要任何键。
为react manage元素添加键（并且添加随机键-就像您使用
Math.random（）
方法所做的那样）将覆盖react预定义的键，并可能导致程序出现类似于此处所述的渲染错误

仅当您从数组生成组件时（例如使用map函数），才需要键

从：

键有助于识别哪些项已更改、已添加或已删除。应将键指定给数组中的元素，以使元素具有稳定的标识：

这里你不需要那个

此外，每次渲染的关键点都必须相同，在这里，您将生成一个随机关键点（每次渲染此组件时都使用math random方法）

现在，由于您正在使用此库：

精确地说，你必须使用一个键。这里的问题是，你必须给出一个常量键。因此，删除数学随机函数，并给出一些常量字符串，就像我在这里做的那样：

import React，{useState}来自“React”；
从“/Section.js”导入节；
从“帧运动”导入{AnimatePresence，motion}；
从“/Project.js”导入项目；
从“@material ui/icons/ArrowBackIos”导入ArrowBackIosIcon；
从“@material ui/icons/ArrowForwardIos”导入ArrowForwardIosIcon；
const ProjectList=props=>{
const[page，setPage]=useState（0）；
施工项目=[
,
];
const paginate=newPage=>{
设置页面（新页面）；
};
返回(
分页（第1页）}>
{项目[第页]}
分页（第+1页）}>
);
};
导出默认项目列表；
实际上，这里不需要任何钥匙。
为react manage元素添加键（并且添加随机键-就像您使用
Math.random（）
方法所做的那样）将覆盖react预定义的键，并可能导致程序出现类似于此处所述的渲染错误

仅当您从数组生成组件时（例如使用map函数），才需要键

从：

键有助于识别哪些项已更改、已添加或已删除。应将键指定给数组中的元素，以使元素具有稳定的标识：

这里你不需要那个

此外，每次渲染的关键点都必须相同，在这里，您将生成一个随机关键点（每次渲染此组件时都使用math random方法）

现在，由于您正在使用此库：

精确地说，你必须使用一个键。这里的问题是，你必须给出一个常量键。因此，删除数学随机函数，并给出一些常量字符串，就像我在这里做的那样：

import React，{useState}来自“React”；
从“/Section.js”导入节；
从“帧运动”导入{AnimatePresence，motion}；
从“/Project.js”导入项目；
从“@material ui/icons/ArrowBackIos”导入ArrowBackIosIcon；
从“@material ui/icons/ArrowForwardIos”导入ArrowForwardIosIcon；
const ProjectList=props=>{
const[page，setPage]=useState（0）；
施工项目=[
,
];
const paginate=newPage=>{
设置页面（新页面）；
};
返回(
分页（第1页）}>
{项目[第页]}
分页（第+1页）}>
);
};
导出默认项目列表；
当我不使用密钥时，控制台会抛出一系列警告，很抱歉我应该提到。这会出现在prod中吗？有没有办法消除它？它会抛出哪种警告？你能发布它们吗？@JordanBaron所以我编辑了我的警告。你的问题是使用随机函数，它会为每次渲染生成一个新的密钥（因此，第一次渲染时，元素1将具有键“12345”，下一次将具有键“45678”.React将不知道如何渲染。这将导致许多渲染错误。使用常量名称或数字istead，就像我所做的一样。当我不使用键时，控制台会抛出一系列警告，很抱歉，我应该提到这一点。这会出现在prod中吗？有什么方法可以消除它吗？它会抛出哪种警告？你能发布它们吗？@JordanBaron So i edit我的。你的问题是，你使用随机函数，它将为每次渲染生成一个新的键（因此，第一次渲染时，元素1将具有键“12345”，下次它将具有键“45678”。React将不知道如何渲染它。这将导致许多渲染错误。请像我一样使用常量名称或数字istead