使用Reactjs的计数器按钮

Question

我是学习reactjs的初学者，我正在制作一个小应用程序，它只是写文章，并且我想为每个文章创建一个类似的按钮和计数器，我尝试使用状态来使其成为可能，但它使用了所有帖子均使用同一柜台 这是MyPosts.jsx文件

import React from 'react'

export default (props) => {
let likes=0;
return <div className="Post">
  <h4>{props.post} </h4>
  <p>{props.like}</p>
  <button onClick={() =>props.LikesCount(props.like)}>Like</button>
  <button onClick={()=>props.deletePost(props.index)} >Delete</button>
</div>
}
export const Post = () => {
return <div>
   post export

</div>
}

以及用于计算来自app.js文件的喜欢和状态的函数

   state = {
    like:0,
    posts: []
}
  LikesCount = (like) => {

    this.setState({ like: this.state.like + 1})
  }

不知道如何在不使用状态的情况下为每个帖子计数吗？谢谢。

Answer 1

当前，您的代码存在的问题是您使用的是1个like变量，而posts是一个数组。我假设deletePost(some index)正在从posts数组中删除带有某个正索引的帖子。

解决方案1 ​​

您可以将状态中的likes转换为数组。因此，当您执行props.LikesCount(props.index)并在LikesCount函数中时，

LikesCount = (index) => {

    this.state.likes[index] += 1;
  }

现在，当您删除帖子时，还需要在likes数组中拼接相同的索引。

解决方案2

您可以将posts设置为对象数组，其中每个对象都表示以下内容：

{
   likes: 0,
   post: ''
}