我可以将函数分配为 this.state 中的属性吗？

Question

我试图使用 this.handleFormula 函数在 div 中呈现字符串的最后一个值。我将此函数分配给 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

         }

       }

    }

  }

Answer 1

React 不渲染函数，就像它不渲染布尔值一样。如果你想渲染函数声明（这没有多大意义），而不是在你的 div中{this.state.formula}使用。{this.state.formula.toString()}但是，由于您希望渲染您的返回值，因此如果设置某个状态并且您可以仅渲染该状态handleFormula会更好。handleFormula为什么这样更好？因为设置新状态会导致重新渲染，您将始终在 UI 中看到新状态。渲染的返回值this.state.formula将始终相同，您可能会将其视为错误。NB 将函数附加到状态是不寻常的，但它不应该引起任何类型的问题。由于性能原因，我一直看到人们在上下文提供程序中这样做：value={this.state}他们将方法附加到状态。

Answer 2

你需要清理一下。您不能在该州使用功能。该状态仅适用于可以在一段时间内更改的数据。您可以查看我的实现并获得一些想法。 https://codesandbox.io/s/calculatorreact-gi30v像 buttonState 一样，不应该是 state 的一部分。它可以移动到类属性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