javascript - 尝试使用钩子(Hook)添加 '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={likes} 分配给相同的状态。

您需要将“喜欢”状态(和 addLikes 函数)移至“MyImage”组件中，因此每个 MyImage 都有其自己单独的状态位。