亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我可以將函數分配為 this.state 中的屬性嗎?

我可以將函數分配為 this.state 中的屬性嗎?

瀟湘沐 2022-06-05 11:03:45
我試圖使用 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         }       }    }  }
查看完整描述

2 回答

?
森林海

TA貢獻2011條經驗 獲得超2個贊

React 不渲染函數,就像它不渲染布爾值一樣。

如果你想渲染函數聲明(這沒有多大意義),而不是在你的 div中{this.state.formula}使用。{this.state.formula.toString()}

但是,由于您希望渲染您的返回值,因此如果設置某個狀態并且您可以僅渲染該狀態handleFormula會更好。handleFormula

為什么這樣更好?因為設置新狀態會導致重新渲染,您將始終在 UI 中看到新狀態。渲染的返回值this.state.formula將始終相同,您可能會將其視為錯誤。

NB 將函數附加到狀態是不尋常的,但它不應該引起任何類型的問題。由于性能原因,我一直看到人們在上下文提供程序中這樣做:value={this.state}他們將方法附加到狀態。


查看完整回答
反對 回復 2022-06-05
?
慕娘9325324

TA貢獻1783條經驗 獲得超5個贊

你需要清理一下。您不能在該州使用功能。該狀態僅適用于可以在一段時間內更改的數據。


您可以查看我的實現并獲得一些想法。 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


查看完整回答
反對 回復 2022-06-05
  • 2 回答
  • 0 關注
  • 116 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號