尝试使用钩子添加'liking'功能，但所有照片同时被喜欢

Question

我添加了一个"喜欢"函数来增加任何给定迭代中照片的喜欢计数。

问题是图库中的所有照片都同时被喜欢。

我想单独喜欢照片。

const Gallery = ({ initialData, initialDataSetTwo, initialDataSetThree }) => {
const [data, setData] = useState(initialData);
const [dataTwo, setDataTwo] = useState(initialDataSetTwo);
const [dataThree, setDataThree] = useState(initialDataSetThree);
const [likes, setLikes] = useState(0);
const addLike = () => {
setLikes(likes + 1);
};
return (
<Wrapper>
<Styles className="row">
<Div className="col-xs-4">
{data.map(item => (
<MyImage
key={item.id}
src={item.fields.image.file.url}
header={item.fields.name}
likes={likes}
addLike={addLike}
/>
))}
</Div>

在这里，在图标中，我有一个onClick功能可以更新喜欢。

同样，我可以增加喜欢，但所有照片都会立即被喜欢。

我应该怎么做？谢谢！

const MyImage = ({ src, header, likes, addLike }) => {
const [ref, hovered] = useHover();
return (
<MyImageDiv ref={ref} className="row imageSpace">
{hovered && (
<div className="name">
<h1>
{header} <span className="likespan">{likes}</span>{" "}
<i onClick={() => addLike()} class="likeicon far fa-heart"></i>
</h1>{" "}
</div>
)}
<img className="image" alt="fall" src={src} />
</MyImageDiv>
);
};

Answer 1

您在图库组件中设置了喜欢状态。即使您在每个图像上映射，您仍然会将喜欢的道具likes={likes}分配给相同的状态。

您需要将喜欢状态(和addLikes函数(移动到"MyImage"组件中，以便每个MyImage都有自己单独的状态位。

Answer 2

您需要在数据模型本身中维护一个 like 变量，因为每个项目都需要存在 likes 属性，而不是作为一个整体存在

const Gallery = ({ initialData, initialDataSetTwo, initialDataSetThree }) => {
const [data, setData] = useState(initialData);
const [dataTwo, setDataTwo] = useState(initialDataSetTwo);
const [dataThree, setDataThree] = useState(initialDataSetThree);
const addLike = (index) => {
setData(prev => [...prev.slice(0, index), {...prev[index], likes: prev[index].likes + 1}, ...prev.slice(index+1)])
};
return (
<Wrapper>
<Styles className="row">
<Div className="col-xs-4">
{data.map((item, index) => (
<MyImage
key={item.id}
index={index}
src={item.fields.image.file.url}
header={item.fields.name}
likes={likes}
addLike={addLike}
/>
))}
</Div>
</Styles>
</Wrapper>
)
}

---

const MyImage = ({ src, index, header, likes, addLike }) => {
const [ref, hovered] = useHover();
return (
<MyImageDiv ref={ref} className="row imageSpace">
{hovered && (
<div className="name">
<h1>
{header} <span className="likespan">{likes}</span>{" "}
<i onClick={() => addLike(index)} class="likeicon far fa-heart"></i>
</h1>{" "}
</div>
)}
<img className="image" alt="fall" src={src} />
</MyImageDiv>
);
};