更新数组对象中的一个值

Question

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

尝试通过数组进行映射并返回“likes”+1。

这里有 3 个以数据开头的单独文件。数据存储在状态库的“主要”部分。因此，总而言之，我想在单击该图像时增加喜欢的数量。但是当我设置状态时，我不知道如何只能针对数组的一个对象中的一个值。我宁愿只更新状态，也不愿在 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

您的 increaseLikes 函数需要从 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，您可以在其中查看如何操作。希望这会有所帮助。