javascript - 我可以将函数指定为 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 不渲染函数，就像它不渲染 bool 值一样。

如果您想渲染函数声明(这没有多大意义)，请使用 {this.state.formula.toString() 而不是 {this.state.formula} } 在你的 div 中。

但是，由于您希望渲染 handleFormula 的返回值，因此如果 handleFormula 设置某些状态并且只渲染该状态会更好的状态。

为什么这样更好？因为设置新状态会导致重新渲染，并且您将始终在 UI 中看到新状态。 this.state.formula 的渲染返回值将始终相同，您可能会将其视为一个错误。

注意将函数附加到状态是不常见的，但它不应该引起任何类型的问题。我看到人们出于性能原因在 Context 提供程序中这样做: value={this.state} 他们将方法附加到状态。