时间戳

首页 > 解决方案 > 在 React 中单击时更新 JSON 对象值

javascript - 在 React 中单击时更新 JSON 对象值

问题描述

我一直在关注关于更新值的教程，它increments是用户单击按钮时的值。

但是，我有JSON要更新的对象值。当用户单击按钮和 时，应更新该值vice versa。在我尝试按照示例实现之后，它没有改变。这是我的代码：

1.点击：

<div>
  Point: {item.point}&emsp;
  <button onClick={() => setCount(item.point + 1)} class="btn"><i class="fa fa-arrow-up"></i></button>
  <button onClick={() => setCount(item.point - 1)} class="btn"><i class="fa fa-arrow-down"></i></button>
</div>

2.使用状态：

const [count, setCount] = useState(0);

3.comments.json：

{
        "id": "fa1ca3c1-cc1e-4ed9-86b8-f60d8312d499",
        "author": "Neal Topham",
        "avatar": "http://lorempixel.com/100/100/people/1/",
        "date": "2017-02-08T00:30:05.552Z",
        "message": "Mungkin ada fenomena paranormal yang tidak bisa dijelaskan. Lebih baik nyala mati sendiri daripada tidak nyala sama sekali",
        "point": 3,
}

4.教程链接：

https://reactjs.org/docs/hooks-state.html

标签： javascripthtmljsonreactjs

解决方案

1.使用状态：

const [items, setItems] = useState([]);

2.修改按钮：

<button
  onClick={() => {
   // first, clone it
    const newItems = [...items];
    newItems[idx] = {
      ...item,
      point: item.point + 1
    };
    setItems(newItems);
  }}
  className="btn-upvote"
>
  <i className="fa fa-arrow-up"></i>
</button>

 <button
  onClick={() => {
    // first, clone it
    const newItems = [...items];
    newItems[idx] = {
      ...item,
      point: item.point - 1
    };
    setItems(newItems);
  }}
  className="btn-downvote"
>
  <i className="fa fa-arrow-down"></i>
</button>

推荐阅读