单击按钮时，数字加 1答案

【问题标题】：On click of button, increment number by 1单击按钮时，数字加 1
【发布时间】：2018-07-29 06:05:39
【问题描述】：

尝试在点击事件时使数字增加 1，想知道什么是正确的方法吗？

在我的渲染（）中：

{this.state.posts.map((post, i) =>
     <div key={post._id}>

         <span>Votes: {post.votes}</span>


         <a href="" onClick={() => this.votePost(post._id, i)}>
             Click Me
         </a>
     </div>
 )}

初始状态：

state = {
    posts: [],
};

点击功能：

votePost = async id => {
    await axios.put(`/posts/${id}`);

    this.setState({

    })
};

后端：

router.put('posts/:post_id', async (req, res, next) => {
try {
    const { post_id } = req.params;
    const { votes } = req.body;

    const doc = await Post.findByIdAndUpdate(post_id, { votes });
    res.status(200).send(doc);
} catch (e) {
    next(e);
}
});

【问题讨论】：

您从哪里获得 newPostData 表单？如果您是从服务器获取它，那很好，但您只需要更新该特定帖子，无需重置整个帖子。
您可以做的另一件事是您可以先在客户端设置递增投票然后进行服务器调用，但是您需要检查服务器是否有错误然后您需要减少它在客户端再次增加 1。

标签： node.js mongodb reactjs express

【解决方案1】：

如果要更改状态数组的特定条目的值，则需要跟踪渲染循环中的索引：

{this.state.posts.map((post, i) =>
     <div key={post._id}>

         <span>Votes: {post.votes}</span>


         <a href="" onClick={() => this.votePost(post._id, i)}>
             Click Me
         </a>
     </div>
 )}

因此您可以在您的 votePost 函数中更改正确帖子的值

votePost = async (id, index) => {

    await axios.put(`/posts/${id}/upvote` /*or downvote*/);

        ....

    });

    // Update your state like this:
    this.setState(({posts})=>{
       posts[index] = newPostData;
       return posts
    });
}

编辑：

对于后端，最终可以创建两个端点/upvote 和/downvote：

const vote = (req, res, next)=>{
    try {
       const { post_id } = req.params;
       const doc = await Post.findByIdAndUpdate(post_id, ({ votes })=>({votes: req.voteup ? votes + 1 : votes - 1});
       res.status(200).send(doc);
   } catch (e) {
    next(e);
   }
}

router.put('posts/:post_id/upvote', async (req, res, next) => {
    req.voteup = true;
    vote(req, res, next);
});

router.put('posts/:post_id/downvote', async (req, res, next) => {
    req.voteup = false;
    vote(req, res, next);
});

【讨论】：

这是一个非常基本的沙箱示例：codesandbox.io/s/m710lq4vpx
它在前端工作得很好，但我想知道你如何将它保存在后端？还是我们应该在后端执行整个递增逻辑？我已经更新了我的帖子以显示后端
我进行了编辑，为后端提出了一些建议，但今晚没有太多时间。如有必要，我会改进...

【解决方案2】：

要在点击时将数字加 1，您可以使用以下代码。

constructor() {
    this.state = {
        count: 0
    }
}


handleOnCLick = () => {
  this.setState((prevState) => (count: prevState.count + 1))
}

<button onClick={this.handleOnCLick}/>

【讨论】：

在这种情况下，您需要减少投票，以防表单服务器出现错误。