如何在状态 React 中增加对象的值

Question

所以我有一个叫做计数器的组件，其中的状态看起来像这样

state = {
    counters: [
      { id: 1, value: 0 },
      { id: 2, value: 3 },
      { id: 3, value: 0 },
      { id: 4, value: 0 },
    ],
  };

我试图在每次单击相应按钮时增加该值。这是我为它写的函数。

  handleIncrement = (counter) => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value++;
    this.setState({ counters });
  };

没用。这里还有一些额外的观察结果。

当我 console.log 本地计数器对象（从 state.counters 复制）时，它 return 在末尾添加了一个额外的行，id：-1 和值：NaN
变量计数器（作为参数传递）来自子组件。如果单击第一个按钮，它应该是 return 0，如果单击第二个按钮，它应该是 1，依此类推。当我 console.log 它似乎是 return 正确的值。

看起来问题似乎出在行

const index = counters.indexOf(counter);

因为索引的值总是return编辑为-1。

Answer 1

试试这个来获取索引：

const index = counters.findIndex(x => x.id === counter.id);

Answer 2

您可以使用索引来更新数组中的相应记录。

const idx = this.state.counters.findIndex((counter) => counter.id === id);

完成实施：-

import React from "react";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counters: [
        { id: 1, value: 0 },
        { id: 2, value: 3 },
        { id: 3, value: 0 },
        { id: 4, value: 0 }
      ]
    };
  }

  handleClick = (id) => {
    const idx = this.state.counters.findIndex((counter) => counter.id === id);
    const counters = [...this.state.counters];
    counters[idx] = { ...counters[idx], value: counters[idx].value++ };
    this.setState(counters);
  };

  render() {
    return (
      <div>
        {this.state.counters.map((counter) => (
          <div>
            <button onClick={() => this.handleClick(counter.id)}>
              Button {counter.id}
            </button>
            <span>Value {counter.value}</span>
            <hr />
          </div>
        ))}
      </div>
    );
  }
}

Codesandbox - https://codesandbox.io/s/musing-black-cippbs?file=/src/App.js

Answer 3

在这里添加我的答案，以防其他困惑的灵魂偶然发现它。

虽然好像问题出在行

const index = counters.indexOf(counter);

它实际上是在调用函数的子组件中。在我传递的参数中 counters.value 而父组件中的 handleincrement 函数期望的不是值，而是完整的对象。

工作状态下的代码如下父组件：

import React, { Component } from "react";
import Counter from "./counter";

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 0 },
      { id: 2, value: 3 },
      { id: 3, value: 0 },
      { id: 4, value: 0 },
    ],
  };
  
  
    handleIncrement = (counter) => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    console.log(index);
    counters[index] = { ...counter };
    counters[index].value++;
    this.setState({ counters });
  };

子组件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React, { Component } from "react";

class Counter extends Component {

render() {
    return (
<button
          onClick={() => this.props.onIncrement(this.props.counter)}
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
        
        )
        }
        
        
]

如何在状态 React 中增加对象的值

How to increment the value of an object within state React

javascript

html

css

reactjs

web