我可以将函数分配为 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