Javascript 试图添加'；喜欢'；使用钩子的功能，但所有照片都会同时受到欢迎

我添加了一个“like”函数来增加任何给定迭代中照片的like计数

问题是画廊中的所有照片都会同时受到欢迎。

我想要单独的照片

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>

const Gallery=（{initialData，initialdatasetwo，initialDataSetThree}）=>{
const[data，setData]=使用状态（initialData）；
const[dataTwo，setDataTwo]=useState（initialdatasetwo）；
const[dataThree，setDataThree]=useState（initialDataSetThree）；
const[likes，setLikes]=useState（0）；
常量addLike=（）=>{
setLikes（likes+1）；
};
返回(
{data.map（项=>(
))}

在这个图标中，我有一个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>
  );
};

constmyimage=（{src，header，likes，addLike}）=>{
常量[ref，hovered]=useHover（）；
返回(
{悬停&&(
{header}{likes}{”“}
addLike（）}class=“likeicon fa heart”>
{" "}
)}
);
};

您在gallery组件中设置了喜欢的状态。即使在每个图像之间进行映射，您仍然会将喜欢的属性

likes={likes}

指定给相同的状态

---

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

您需要在数据模型本身中维护一个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 Gallery=（{initialData，initialdatasetwo，initialDataSetThree}）=>{
const[data，setData]=使用状态（initialData）；
const[dataTwo，setDataTwo]=useState（initialdatasetwo）；
const[dataThree，setDataThree]=useState（initialDataSetThree）；
常量addLike=（索引）=>{
setData（prev=>[…prev.slice（0，索引），{…prev[index]，likes:prev[index].likes+1}，…prev.slice（索引+1）]）
};
返回(
{data.map（（项目，索引）=>(
))}
)
}

---

constmyimage=（{src，index，header，likes，addLike}）=>{
常量[ref，hovered]=useHover（）；
返回(
{悬停&&(
{header}{likes}{”“}
addLike（index）}class=“likeicon far fa heart”>
{" "}
)}
);
};

明白了！每次迭代，组件都会有自己的状态。我将钩子和函数移到MyImage组件中。效果很好。谢谢

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