尝试使用钩子添加“喜欢”功能，但所有照片同时获得喜欢答案

【问题标题】：Trying to add 'liking' functionality using hooks, but all the photo get liked at the same time尝试使用钩子添加“喜欢”功能，但所有照片同时获得喜欢
【发布时间】：2020-04-05 00:51:56
【问题描述】：

我添加了一个“点赞”功能，以增加任何给定迭代中照片的点赞数。

问题是图库中的所有照片都会同时获得点赞。

我想单独为照片点赞。

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>
  );
};

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

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

您需要将喜欢状态（和 addLikes 函数）移动到“MyImage”组件中，因此每个 MyImage 都有自己独立的状态。

【讨论】：

知道了！在每次迭代中，组件都会被赋予自己的状态位。我将钩子和函数移到 MyImage 组件中。效果很好。谢谢

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

【讨论】：