setState 计数器显示为 NaN

Question

我的代码：

import React from "react"

export default class MenuItem extends React.Component {
    constructor(props) {
        super(props)
        this.state = { value: this.props.value }
    }
    updateValue(newValue) {
        let propertyName =
            this.state.selectedItem.objType === "number" ? "value" : "strValue"
        console.log(propertyName)
        this.setState((prevState) => {
            let objectToUpdate = prevState.currentObjects.find(

        )
        objectToUpdate[propertyName] = newValue
        return { currentObjects: this.state.currentObjects }
    })
}
data = [
    { itemId: 1 },
]

addTen() {
    this.setState((prevState) => {
        let newValue = prevState.value + 1
        return {
            value: newValue,
        }
    })
}

subTen() {
    this.setState((prevState) => {
        let newValue = prevState.value - 1
        this.setState({ newValue })
        return {
            value: newValue,
        }
    })
}

render() {
    let array = this.data.map((itemPrice, itemName) => {
        return (<div>
            <p>${this.props.itemPrice}</p>
            <h2>{this.props.itemName}</h2>
            <p>{this.props.itemDescription}</p>
            <button onClick={() => this.addTen()}>Add to Cart</button>
            <p> Item Count: {this.state.value}</p>

            <button onClick={() => this.addTen()}>Add One</button>
            <button onClick={() => this.subTen()}>Subtract One</button>
        </div>
        )
    })
    return (array)
}
}

问题是，当我去使用加或减按钮时，我得到了这个 picture of item count: NaN

基本上，我试图让按钮在按下按钮时增加或减少一个计数，但它没有这样做，相反，它只是显示为 NaN。此外，即使在开始时也没有计数为 0。我必须按下按钮才能弹出 NaN。我不知道为什么。有什么建议么？我不知道如何解决它。

Answer 1

因此这里需要进行一些更改。首先，在你的构造函数中，你从未给 value 一个默认值，因此 setState 在尝试将 1 加到未定义的值时返回 NaN 。构造函数供参考：

  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }

另一个变化是您的 subTen() 方法。您在 hit 中调用了两次 this.setState 此处是更新版本：

  subTen() {
    this.setState((prevState) => {
      let newValue = prevState.value - 1;
      return {
        value: newValue
      };
    });
  }

setState 计数器显示为 NaN

setState counter showing up as NaN

javascript

java

setstate

reactjs