Question

我收到此错误：

TypeError: Cannot read property 'value' of undefined

当我在应用程序中按Enter键时。我知道问题出在我的购买功能中，因为我只选择了product [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键时输入两个或多个值来设置消息，而不会崩溃我的应用程序。

Answer 1

在进行比较之前添加验证，然后切换：

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

收件人：

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

这将帮助您避免那些未定义的问题。也许您用于currentQuery的{{1}}的{{1}}不在数组中，因此您得到一个空数组，然后将得到filter，因此{{1 }}

Answer 2

在尝试访问其中的元素之前，只需在数组上添加长度检查即可：

buy = () => {
  var currentQuery = this.state.query
  var product = prices.filter(number => number.id === currentQuery);
  if(product.length) { //Check the length of the array here!
      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!"})
     }
  }
}

React无法读取属性值

2 个答案: