Могу ли я назначить функцию как свойство в this.state? - PullRequest
Новая
       8

Могу ли я назначить функцию как свойство в this.state?

0 голосов
/ 29 марта 2020

Я пытаюсь отобразить последнее значение строки в div, используя функцию this.handleFormula. Я назначаю эту функцию формуле в this.state и связываю this.state.formula с div. Я пытаюсь console.log возвращаемое значение, но все еще ничего не рендерится, у вас что может быть проблема?

вот мой код: https://codepen.io/tonytony92/pen/bGdmbzx?editors=1111 

    this.state={
      display:"0",
      formula:this.handleFormula,
      buttonState:[{key: 'AC',
        col:'red',
        key1:"AC"
        },///and a bunch of other objects in array/// ]  }

handleFormula(){
    let str=this.state.display
    console.log(str)
    let newArr=str.match(/["/"+"x"-]/gi)
    let newStr=""
    if (Boolean(newArr)==false){//If no special characters are found in string ,return current display//
      console.log(str)
      return str
    }
    else{
       for(let i=newArr.length-1;i>-1;i--){// if last value is a number concatenate it to a variable///
        if(parseFloat(newArr[i])!==NaN){
             newStr+=newArr[i]
           } 
         else if(i===newArr.length-1&& parseFloat(newArr[i])===NaN){ // if last value is a specialChar return it///
           return newArr[i]
         }
         else{  /// return numbers concatenated in variable///
           return newStr
         }

       }

    }

  }

Ответы [ 2 ]

1 голос
/ 29 марта 2020

React не отображает функции, так же, как не отображает логические значения.

Если вы хотите визуализировать объявление функции (что не имеет особого смысла), вместо {this.state.formula} используйте {this.state.formula.toString()} в вашем div.

Но так как вы ожидаете отрендерить return значение вашего handleFormula было бы лучше, если бы handleFormula устанавливал какую-то часть состояния, и чем вы можете визуализировать только эту часть состояния.

Почему это лучше? Потому что установка нового состояния вызовет повторную визуализацию, и вы всегда будете видеть новое состояние в пользовательском интерфейсе. Возвращаемое возвращаемое значение this.state.formula всегда будет одним и тем же, и вы можете увидеть это как ошибку.

NB Прикрепить функцию к состоянию необычно, но это не должно вызывать каких-либо проблем. Я видел, что peple делают это в контексте провайдера из-за соображений производительности: value={this.state}, где они прикрепляют методы к состоянию.

0 голосов
/ 29 марта 2020

Вам нужно навести порядок. Вы не можете использовать функцию в состоянии. Состояние только для данных, которые могут меняться в течение определенного периода времени.

Вы можете посмотреть на мою реализацию и получить некоторое представление. https://codesandbox.io/s/calculatorreact-gi30v

Как buttonState, не должен быть частью состояния. Он может перейти к свойству класса 

this.buttonState = [
      { key: "AC", col: "red", key1: "AC" },
      { key: "/", col: "gray", key1: "divide", keypress: "o", divide: "/" },
      { key: "x", col: "gray", key1: "multiply", keypress: "j" },
      // rest
      { key: "=", col: "gray", key1: "equals" },
      { key: ".", col: "gray", key1: "point", keypress: "n" },
      { key: "CC", col: "red", key1: "delete" }
    ];

Добавить новую опору состояния для строки, которую вы хотите отобразить в представлении 

this.state = {
      display: "0",
      formula: this.handleFormula,
      str: ""
    };

Обновить строку, когда вы хотите отобразить последнее значение после выполнения формулы . 

handleFormula() {
    let str = this.state.display;
    let newArr = str.match(/["/"+"x"-]/gi);
    let newStr = "";
    if (newArr) {
      return str;
    } else {
      for (let i = newArr.length - 1; i > -1; i--) {
        if (parseFloat(newArr[i]) !== NaN) {
          newStr += newArr[i];
        } else if (i === newArr.length - 1 && parseFloat(newArr[i]) === NaN) {
          return newArr[i];
        } else {
          return this.setState({str: newStr});
        }
      }

    }
  }

Вы можете взглянуть на мою реализацию и получить некоторое представление. https://codesandbox.io/s/calculatorreact-gi30v

...