Question

我有一个包含对象的数组，这些对象带有图像的详细信息（URL，描述，喜欢），我正在尝试克隆Instagram页面，并在单击时更新该1张图像的“喜欢”。

试图映射整个数组并返回“ likes” +1。

以下是从数据开始的3个独立文件。数据存储在状态库的“主要”部分中。因此，总的来说，我想在单击该图像时增加点赞的次数。但是当我使用setState时，我不知道如何只能将一个值作为数组的一个对象的目标。我宁愿只更新状态，也不愿创建新状态onClick，然后更改原来的值！我正在寻找最佳实践。（因为这是我唯一的学习方法）谢谢。

const images =[
{
    url:'./images/img1.jpg',
    description:"test1",
    likes:0,
    index:0
},
{
    url:'./images/img2.jpg',
    description:"test1",
    likes:3,
    index:1
},
{
    url:'./images/img3.jpg',
    description:"test1",
    likes:4,
    index:2
},
{
    url:'./images/img2.jpg',
    description:"test1"
},
{
    url:'./images/img2.jpg',
    description:"test1"
},
{
    url:'./images/img2.jpg',
    description:"test1"
},

]

export default images


import React from 'react'

const Gallery =(props)=>{
    return (
        <div className="container">
            <div className="main-gallery">

                {props.gallery.map((item,index) => (
                    <div key={index} className='img-container' onClick= {props.increaseLikes}>
                        <img className='gallery-images' src={item.url}/> 
                        <p className='likes'>likes {item.likes}</p>
                    </div>
                 ))}

            </div>
        </div>
    )
}

export default Gallery


import React, { Component } from "react";
import ReactDOM from 'react-dom';

import Nav from './Components/Navbar/Nav'
import Header from './Components/Header/Header'
import Carousel from './Components/Carousel/Carousel'
import Data from './Data'
import Gallery from './Components/Gallery/Gallery'

class Main extends Component {

    constructor(props) {
        super(props);

        this.state={
            post:100,
            gallery:[],
        }
    }

    componentDidMount(){

        this.setState({
            gallery:Data
        })

    }

    increaseLikes=()=>{

        //no idea how to update

    }

    render() {

       return (
           <div>
               <Gallery gallery={this.state.gallery} increaseLikes= {this.increaseLikes}/>
           </div>
       )

    }

}

export default Main;

Answer 1

您的gainLikes函数需要从Gallery组件获取图像的ID。

所以代码必须像这样：我认为您的数据具有唯一的id属性。

increaseLikes = id => {

    const updatedData = this.state.gallery.map(image => {
      if (image.id === id) {
        return { ...image, likes: image.likes ? image.likes + 1 : 1 };
      } else {
        return image;
      }
    });

    this.setState({
      gallery: updatedData
    })
  };

图库组件代码：

import React from "react";

const Gallery = props => {
  return (
    <div className="container">
      <div className="main-gallery">
        {props.gallery.map((item, index) => (
          <div
            key={item.id}
            className="img-container"
            onClick={() => props.increaseLikes(item.id)}
          >
            <img
              className="gallery-images"
              src={item.url}
              alt={item.description}
            />
            <p className="likes">likes  {item.likes ? item.likes : 0} </p>
            <hr />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Gallery;

Answer 2

您可以使用图像的url（这似乎是唯一的唯一值）来更新数组，我制作了一个StackBlitz，您可以在其中查看如何做。希望这会有所帮助。

更新数组对象中的一个值

2 个答案: