英文:
React: useState for every div created by .map
问题
我这周开始使用React，现在遇到了这个问题...我使用.map创建了大约20个div，现在我想在特定div上的鼠标悬停事件上显示一些内容。我尝试了useState，但问题是鼠标悬停事件为.map中的每个div设置了true/false值。
有没有办法让我在哪个确切的div上使用useState？
谢谢。
const [info, setInfo] = useState(false);
<div className="list">
{data.data.collection_collection[0].entities.map((video) => (
<div
onMouseEnter={() => setInfo(true)}
onMouseLeave={() => setInfo(false)}
className="videoImg"
key={video.id}
>
<img src={video.images[0].url} alt={video.title} />
{info ? <p>{video.description}</p> : <p>Hi</p>}
</div>
))}
</div>
为“那个”人的整个代码...
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import fetchEvents from "./fetchEvents";
const List = () => {
const { data, isLoading } = useQuery(["fetch"], fetchEvents);
const [info, setInfo] = useState(false);
if (isLoading) return "Loading...";
return (
<>
<div className="info">
<h2>{data.data.title}</h2>
<h3>{data.data.description}</h3>
</div>
<div className="list">
{data.data.collection_collection[0].entities.map((video) => (
<div
onMouseEnter={() => setInfo(true)}
onMouseLeave={() => setInfo(false)}
className="videoImg"
key={video.id}
>
<img src={video.images[0].url} alt={video.title} />
{info ? <p>{video.description}</p> : <p>Hi</p>}
</div>
))}
</div>
</>
);
};
一切都在这里..................................
英文:
I start with react this week and now I have this problem... I created ~20 divs with .map, Now I wanna show something inside div.. based on mouse over event on specific div. I tried useState , but problem is mouseOver event set true/false value for every div from .map.
Is something what I can do to specific on what exact div I wanna use useState?
Thank you.
const [info, setInfo] = useState(false);
<div className="list">
{data.data.collection_collection[0].entities.map((video) => (
<div
onMouseEnter={() => setInfo(true)}
onMouseLeave={() => setInfo(false)}
className="videoImg"
key={video.id}
>
<img src={video.images[0].url} alt={video.title} />
{info ? <p>{video.description}</p> : <p>Hi</p>}
</div>
))}
</div>
Whole code for "that" guy..
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import fetchEvents from "./fetchEvents";
const List = () => {
const { data, isLoading } = useQuery(["fetch"], fetchEvents);
const [info, setInfo] = useState(false);
if (isLoading) return "Loading...";
return (
<>
<div className="info">
<h2>{data.data.title}</h2>
<h3>{data.data.description}</h3>
</div>
<div className="list">
{data.data.collection_collection[0].entities.map((video) => (
<div
onMouseEnter={() => setInfo(true)}
onMouseLeave={() => setInfo(false)}
className="videoImg"
key={video.id}
>
<img src={video.images[0].url} alt={video.title} />
{info ? <p>{video.description}</p> : <p>Hi</p>}
</div>
))}
</div>
</>
);
};
Everything.................................
答案1
得分: 2
现在你的useState被所有这些div所共享。所以，你可以将其映射到一个拥有自己useState和onmouseover的组件，而不是将其映射到div中。这被称为提取到一个组件。
每当你有一些重复的东西并且它有自己的状态，那你可能应该进行提取。
所以，这个被重复了20次的div应该成为一个独立的组件。然后，你会在这个新创建的组件中拥有一个useState，它将具有onmouseover事件。这将只触发这个实例。
英文:
Right now your useState is being shared to all these divs. So instead of mapping those into divs you map it to a component that have it's own useState and onmouseover. This is called extracting to a component.
Whenever you have something that is repeated and have it's own state than you should probably be extracting.
So this div that is repeated 20 times should be a component by itself. Than you would have a useState in this new created component that would have the onmouseover event on it. That would only trigger this instance.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论