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

Question

我正在尝试使用 this.handleFormula 函数在 div 中呈现字符串的最后一个值。我将此函数分配给 this.state 中的公式，并将 this.state.formula 链接到 div。我正在尝试 console.log return 值，但仍然没有渲染任何内容，你知道这可能是什么问题吗？

这是我的代码笔：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.toString()} 而不是 {this.state.formula}

但是由于您希望渲染 handleFormula 的 return 值，因此如果 handleFormula 设置某些状态并且您可以只渲染那部分会更好状态。

为什么更好？因为设置新状态会导致重新渲染，您将始终在 UI 中看到新状态。呈现 this.state.formula 的 return 值将始终相同，您可能会将其视为错误。

N.B。将函数附加到状态是不寻常的，但它不应该引起任何类型的问题。由于性能原因，我一直看到人们在上下文提供程序中这样做：value={this.state} 他们将方法附加到状态。

Answer 2

你需要清理一下。你不能在状态下使用功能。状态仅适用于可以随时间变化的数据。

您可以查看我的实现并获得一些想法。 https://codesandbox.io/s/calculatorreact-gi30v

像buttonState，不应该是状态的一部分。它可以移动到 class 属性

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

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

Can I assign a function as a property in this.state?

javascript

function

this

reactjs

react-redux

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

Can I assign a function as a property in this.state?

javascript

function

this

reactjs

react-redux

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