javascript - React 无法读取属性值

Question

我收到此错误:

TypeError: Cannot read property 'value' of undefined 

当我在应用程序中按 Enter 按钮时。我知道问题出在我的购买功能中，因为我只选择了产品[0]的第一个字符，但我不知道如何以不同的方式进行处理。

我不知道如何设置我的代码以免我的代码崩溃

const prices = [
  {id: "1", value: 2},
  {id: "2", value: 3},
  {id: "3", value: 2.5},
  {id: "4", value: 5.5},
  {id: "5", value: 2.75},
  {id: "6", value: 1.25},
  {id: "7", value: 7.5},
  {id: "8", value: 2},
  {id: "9", value: 4.25}
]

class FrontPanel extends Component {
  constructor(){
    super()
    this.clearMessage = this.clearMessage.bind(this);

    this.state = {
        credit: 0,
        query: "",
        message: "Please select a product!"
      }
  }

calculateRest = (money, cost) => {
  let newCredit = money - cost;
  this.setState({ credit: newCredit})
}

addToQuery = (id) => {
       this.setState(prevState => ({
          query: prevState.query + id
       }), () => {

       this.onChangeQuery()
    })
  }

clearQuery = () => {
    this.setState({
      query: ""
    })
  }

    buyMessage = () => {
  this.setState({ message: "Thank you for your purchase!"})
  setTimeout( () => {this.clearMessage()},2000)
  }


buy = () => {
  var currentQuery = this.state.query
  var product = prices.filter(number => number.id === currentQuery);
  var money = this.state.credit;
  if (money >= product[0].value) {
    this.calculateRest(money, product[0].value);
    this.clearQuery();
    this.buyMessage();
  }
  else {
    this.setState({ message: "Please add more credit!"})
  }
}
  render() {

    return (
      <div>

          <Screen
            credit={this.state.credit}
            query={this.state.query}
            message={this.state.message}/>
          <div className='buttons'>
            <button className="button" onClick={this.addCredit}>Add Credit</button>
            <button className="button" onClick={this.clearScreen}>Clear</button>
            <button className="button" onClick={this.buy}>Enter</button>
            </div>

          <div className="keybord-layout">
          <div className="keybord">
          <button onClick={e => this.addToQuery(e.target.id)} id="1">1</button>
          <button onClick={e => this.addToQuery(e.target.id)} id="2">2</button>
          <button onClick={e => this.addToQuery(e.target.id)} id="3">3</button>
          <button onClick={e => this.addToQuery(e.target.id)} id="4">4</button>
          <button onClick={e => this.addToQuery(e.target.id)} id="5">5</button>
          <button onClick={e => this.addToQuery(e.target.id)} id="6">6</button>
          <button onClick={e => this.addToQuery(e.target.id)} id="7">7</button>
          <button onClick={e => this.addToQuery(e.target.id)} id="8">8</button>
          <button onClick={e => this.addToQuery(e.target.id)} id="9">9</button>
          <button onClick={e => this.addToQuery(e.target.id)} id="0">0</button>
          </div>
          </div>
      </div>
    )
  }
}

我只想当我按 Enter 键并输入 2 个或更多值时设置一条消息，而不是让我的应用程序崩溃。

Answer 1

在进行比较之前添加验证，切换:

if (money >= product[0].value)

至:

if (product && product[0] && money >= product[0].value)

这将帮助您避免那些未定义的问题。也许您用来过滤您的价格的currentQuery不在数组中，因此您得到一个空数组，然后您将得到product = [] 因此 result[0] === undefined