Kalkulator w React [ result.indexOf is not a function]

Question

Panowie czy ktoś z was mógłby rzucić okiem na kod ponieważ mam problem z wyświetlaniem błędu, a brzmi on następująco: result.indexOf is not a function

Przykład: dodaje 45 do 45 to się równa 90 następnie chce to podzielić/pomnożyć lub coś dodać/odjąć do tego i pojawia się ten piękny błąd. Nie wiem z czym to jest związane bo appka sama w sobie działa. Wiem że parę rzeczy jest do poprawy, ale przerzuciłem się z czystego JS na React i powoli się wdrażam. Bez znaczenia jest to jaką operacje matematyczną chce wykonać chodzi o to że pierwsza operacja działa druga już wywala błąd. Jakbyś ktoś mógł rzucić okiem to będę wdzięczny.

import React, {Component} from 'react';
import './App.css';


/* content for buttons of calculator */
const char = ['+', '-', '*', '/'];
const buttonFromOneToThree = [1, 2, 3];
const buttonFromFourToSix = [4, 5, 6];
const buttonFromSevenToNine = [7, 8, 9];

export default class App extends Component{
  state = {
    result: '',
    char: ''
  }

  handleNumberClick = (event) => {
    const number = event.target.textContent;
    this.setState({
      result: this.state.result + number
    })
  }

  handleCharClick = (event) => {
    const char = event.target.textContent;
    const result = this.state.result;
    if((result.indexOf('+') > -1) || (result.indexOf('-') > -1) || (result.indexOf('*') > -1) || (result.indexOf('/') > -1)){
      this.setState({
        result: this.state.result + ''
      })
    }
    else{
      this.setState({
        result: this.state.result + char,
        char: char
      })
    }
  }

  handleResultClick = () => {
    let result;
    const string = this.state.result;
    const numbers = string.split(this.state.char);
    if(string.indexOf('+') > -1) result = parseFloat(numbers[0]) + parseFloat(numbers[1]);
    else if(string.indexOf('-') > -1) result = numbers[0] - numbers[1];
    else if(string.indexOf('*') > -1) result = numbers[0] * numbers[1];
    else result = numbers[0] / numbers[1];
    this.setState({
      result: result
    })
  }

  handleClearClick = () => {
    this.setState({
      result: '',
      char: ''
    })
  }

  render(){
    const buttonsChars = char.map(char => (
      <ButtonMath 
        class="button"
        click={this.handleCharClick}
        char={char} 
      />
    ))

    const buttonsFromOneToThree = buttonFromOneToThree.map(number => (
      <ButtonFromOneToThree
        class="button"
        click={this.handleNumberClick}
        number={number} 
      />
    ))

    const buttonsFromFourToSix = buttonFromFourToSix.map(number => (
      <ButtonFromFourToSix
        class="button"
        click={this.handleNumberClick}
        number={number} 
      />
    ))

    const buttonsFromSevenToNine = buttonFromSevenToNine.map(number => (
      <ButtonFromSixToNine
        class="button"
        click={this.handleNumberClick}
        number={number} 
      />
    ))

    return(
      <div className="wrapper">
        <div className="screen">
          {this.state.result}
        </div>
        <div className="first-row">
          {buttonsChars}
        </div>
        <div className="row">
          {buttonsFromSevenToNine}
        </div>
        <div className="row">
          {buttonsFromFourToSix}
        </div>
        <div className="row">
          {buttonsFromOneToThree}
        </div>
        <div className="row">
          <button onClick={this.handleNumberClick}>0</button>
          <button onClick={this.handleNumberClick}>.</button>
          <button onClick={this.handleClearClick}>C</button>
        </div>
        <button className="btn-result" onClick={this.handleResultClick}>=</button>
      </div>
    )
  }
}

const ButtonMath = (props) => {
  return <button onClick={props.click} className={props.class}>{props.char}</button>;
}

const ButtonFromOneToThree = (props) => {
  return <button onClick={props.click} className={props.class}>{props.number}</button>;
}

const ButtonFromFourToSix = (props) => {
  return <button onClick={props.click} className={props.class}>{props.number}</button>;
}

const ButtonFromSixToNine = (props) => {
  return <button onClick={props.click} className={props.class}>{props.number}</button>;
}

.button-style {
  font-weight: 500;
  font-size: 20px;
  font-family: sans-serif;
  border: none;
  outline: none;
  transition: background 500ms;
}
.button-style:hover {
  background: #b3b3b3;
}
.wrapper {
  position: relative;
  width: 400px;
  border-radius: 10px;
  background: black;
}
.wrapper .screen {
  width: 100%;
  height: 125px;
  line-height: 125px;
  padding: 0 10px 0 10px;
  font-size: 40px;
  font-family: sans-serif;
  color: white;
  text-align: right;
  border-radius: 8px;
  background: black;
  box-sizing: border-box;
}
.wrapper .first-row {
  width: 100%;
  height: 75px;
  background: red;
}
.wrapper .first-row button {
  width: 25%;
  height: 100%;
  font-weight: 500;
  font-size: 20px;
  font-family: sans-serif;
  border: none;
  outline: none;
  transition: background 500ms;
}
.wrapper .first-row button:hover {
  background: #b3b3b3;
}
.wrapper .row {
  width: 75%;
  height: 75px;
}
.wrapper .row button {
  width: 33.33%;
  height: 100%;
  font-weight: 500;
  font-size: 20px;
  font-family: sans-serif;
  border: none;
  outline: none;
  transition: background 500ms;
}
.wrapper .row button:hover {
  background: #b3b3b3;
}
.wrapper .btn-result {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  height: 300px;
  background: #FF4500;
  border: none;
  transition: background 500ms;
}
.wrapper .btn-result:hover {
  background: #b33000;
}

 

Comments

szybcej dostanies dobrą odp jak dasz tylko ten kod, gdzie debuger wywala Ci błędy i nie zmuszasz innych do czytania tak długiego kodu.

Answer 1

Przed operacją i po tę zmienną/stałą sprawdź za pomocą instrukcji typeof.

Jeśli przed coś było typem array, a później zmieniło się na np. typ string, to indexOf nie zadziała, ponieważ indexOf mówi o indeksie w tablicy.

Comments

Rzeczywiście nie wziąłem pod uwagę że parseFloat() zmieni mi stringa na typ number po czym wartość w state będzie typu number, a na nim nie da się użyć indexOf(). Dziękuję za szybką rozkminke.

---

Możesz zapamiętać, że jeśli dostajesz mniej więcej taki komunikat "... is not a function", to najprawdopodobniej próbujesz wywołać funkcję na niedozwolonym typie, czy coś w ten deseń.