我可以在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的呈现返回值将始终相同，并且您可能会发现它是一个错误。

N.B。将功能附加到状态是不寻常的，但不应引起任何问题。我一直看到peple在Context provider中这样做是由于性能原因：value={this.state}他们将方法附加到状态。