React - eval関数をリファクタリングしてコード品質を改善する

Question

Reactでの再生を開始し、簡単な電卓アプリケーションを構築しました。 誰かが私のコードを改善するために取ることができる手順について助言できるでしょうか。

理想的には、状態を適切に使用する方法、およびeval関数の使用方法をリファクタリングする方法についてのアイデアが理想的です。

は、あなたが行っているだろうか上の任意のフィードバックをお願い申し上げます。この異なっaswell :)

import React from 'react'; 
 

 
class Calculator extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 
     this.state = { 
 
     prev: [], 
 
     total: [] 
 
     }; 
 
    } 
 

 
    inputDigit(int) { 
 

 
    var newArr = this.state.total.slice(); 
 
    newArr.push(int); 
 
    this.setState({total: newArr}); 
 

 
    } 
 

 
    addition(prevNum) { 
 

 
    var store = this.arrToNum(prevNum); 
 
    var newArr = this.state.prev.slice(); 
 
    newArr.push(store , "+"); 
 
    var string = newArr.join(" "); 
 
    this.setState({total:[] , prev: [string]}); 
 

 
    return prevNum; 
 

 
    } 
 

 
    minus(prevNum) { 
 

 
    var store = this.arrToNum(prevNum); 
 
    var newArr = this.state.prev.slice(); 
 
    newArr.push(store , "-"); 
 
    var string = newArr.join(" "); 
 
    this.setState({total:[] , prev: [string]}); 
 

 
    return prevNum; 
 

 
    } 
 

 
    divide(prevNum) { 
 

 
    var store = this.arrToNum(prevNum); 
 
    var newArr = this.state.prev.slice(); 
 
    newArr.push(store , "/"); 
 
    var string = newArr.join(" "); 
 
    this.setState({total:[] , prev: [string]}); 
 

 
    return prevNum; 
 

 
    } 
 

 
    multiply(prevNum) { 
 

 
    var store = this.arrToNum(prevNum); 
 
    var newArr = this.state.prev.slice(); 
 
    newArr.push(store , "*"); 
 
    var string = newArr.join(" "); 
 
    this.setState({total:[] , prev: [string]}); 
 

 
    return prevNum; 
 
    } 
 

 
    clearInput() { 
 

 
    this.setState({total:[],prev:[]}); 
 

 
    } 
 

 
    sum(currNum) { 
 

 
    var store = this.arrToNum(currNum); 
 
    var newArr = this.state.prev.slice(); 
 
    newArr.push(store); 
 
    console.log(newArr.join(" ")); 
 
    var sum = eval(newArr.join(" ")); 
 

 
    this.setState({total:[sum]}); 
 

 
    } 
 

 
    arrToNum(arr) { 
 

 
    var test = Number(arr.join('')); 
 

 
    return test; 
 

 
    } 
 

 
    makePretty(num) { 
 

 
    var newNum = this.arrToNum(num); 
 
    var formatNum = newNum.toLocaleString(); 
 

 
    return formatNum; 
 

 
    } 
 

 
    render() { 
 
    return(
 
     <div className="Calculator"> 
 
     <div className="Screen"> 
 
      <p>{this.makePretty(this.state.total)}</p> 
 
     </div> 
 
     <div className="KeyPad"> 
 
      <div className="row"> 
 
      <button className="square" onClick={() => this.inputDigit(7)}>7</button> 
 
      <button className="square" onClick={() => this.inputDigit(8)}>8</button> 
 
      <button className="square" onClick={() => this.inputDigit(9)}>9</button> 
 
      <button className="square" onClick={() => this.addition(this.state.total)}>+</button> 
 
      </div> 
 
      <div className="row"> 
 
      <button className="square" onClick={() => this.inputDigit(4)}>4</button> 
 
      <button className="square" onClick={() => this.inputDigit(5)}>5</button> 
 
      <button className="square" onClick={() => this.inputDigit(6)}>6</button> 
 
      <button className="square" onClick={() => this.minus(this.state.total)}>-</button> 
 
      </div> 
 
      <div className="row"> 
 
      <button className="square" onClick={() => this.inputDigit(1)}>1</button> 
 
      <button className="square" onClick={() => this.inputDigit(2)}>2</button> 
 
      <button className="square" onClick={() => this.inputDigit(3)}>3</button> 
 
      <button className="square" onClick={() => this.multiply(this.state.total)}>*</button> 
 
      </div> 
 
      <div className="row"> 
 
      <button className="square" onClick={() => this.inputDigit(0)}>0</button> 
 
      <button className="square" onClick={() => this.inputDigit(".")}>.</button> 
 
      <button className="square" onClick={() => this.sum(this.state.total)}>=</button> 
 
      <button className="square" onClick={() => this.divide(this.state.total)}>/</button> 
 
      </div> 
 
      <div className="row"> 
 
      <button className="square full" onClick={() => this.clearInput()}>CLEAR</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default Calculator;

Answer 1

の1-

inputDigit(int) { 
    this.setState({total: [ 
    ...this.state.total, 
    int 
    ]}) 
} 

2 -

addition(prevNum) { 
let store = this.arrToNum(prevNum); 
let string = [...this.state.prev, store, '+'].join(' '); 
this.setState({total:[] , prev: [string]}); 
return prevNum; 
} 

この

<div className="row"> 
    {[ 
    ['7',() => this.inputDigit(7)], 
    ['8',() => this.inputDigit(8)], 
    ['9',() => this.inputDigit(9)], 
    ['+',() => this.addition(this.state.total)], 
    ].map(([value, onClick]) => this.renderItem(value, onClick)}) 

で

<div className="row"> 
      <button className="square" onClick={() => this.inputDigit(7)}>7</button> 
      <button className="square" onClick={() => this.inputDigit(8)}>8</button> 
      <button className="square" onClick={() => this.inputDigit(9)}>9</button> 
      <button className="square" onClick={() => this.addition(this.state.total)}>+</button> 
      </div> 

：

は、あなたが

3 - が置き換え、これをこの機能

renderItem(value, onClick) { 
    return <button className="square" onClick={onclick}>{value}</button> 
} 

4-追加機能の残りの部分と同じパターンに従わなければなりません

5-すべてのビューで同じパターンに従います

Answer 2

そして、それは別のコードレビューです...

import React from 'react' 

class Calculator extends React.Component { 
    state = { 
    prev: [], 
    total: [] 
    } 

    inputDigit(int) { 
    let {state} = this.state 
    this.setState({ 
     total: [...total, int] 
    }) 
    } 

    action(prevNum, symbol) { 
    let store = Number(prevNum.join('')) 
    let {prev} = this.state 
    let string = [...prev, store, symbol].join(' ') 
    this.setState({total: [], prev: [str]}) 
    return prevNum 
    } 

    clearInput() { 
    this.setState({total: [], prev: []}) 
    } 

    sum(currNum) { 
    let store = Number(currNum.join('')) 
    let {prev} = this.state 
    let sum = eval([...prev, store].join(' ')) 
    this.setState({total: [sum]}) 
    } 

    makePretty(num) { 
    return Number(num.join('')).toLocaleString() 
    } 
    renderItem(value, onClick) { 
    if (!onClick) onClick =() => this.inputDigit(value) 
    return (
     <button className="square" onClick={onclick}> 
     {value} 
     </button> 
    ) 
    } 
    render() { 
    return (
     <div className="Calculator"> 
     <div className="Screen"> 
      <p>{this.makePretty(this.state.total)}</p> 
     </div> 
     <div className="KeyPad"> 
      <div className="row"> 
      {[ 
       [7], 
       [8], 
       [9], 
       ['+',() => this.action(this.state.total, '+')] 
      ].map(([value, _function]) => this.renderItem(value, _function))} 
      </div> 
      <div className="row"> 
      {[ 
       [4], 
       [5], 
       [6], 
       ['-',() => this.action(this.state.total, '-')] 
      ].map(([value, _function]) => this.renderItem(value, _function))} 
      </div> 
      <div className="row"> 
      {[ 
       [1], 
       [2], 
       [3], 
       ['*',() => this.action(this.state.total, '*')] 
      ].map(([value, _function]) => this.renderItem(value, _function))} 
      </div> 
      <div className="row"> 
      {[ 
       [0], 
       ['.'], 
       ['='], 
       ['/',() => this.action(this.state.total, '/')] 
      ].map(([value, _function]) => this.renderItem(value, _function))} 
      </div> 
      <div className="row"> 
      <button className="square full" onClick={() => this.clearInput()}> 
       CLEAR 
      </button> 
      </div> 
     </div> 
     </div> 
    ) 
    } 
}