ما سبب هذا الخطأ ؟

Mohamed Lamin Mahmoudi · 21 فبراير 2023

import './App.css';
import React from 'react';
import {useState,useEffect} from 'react'
import Button from './component/Button'
import {Inbut} from './component/inbut';
import {ClearButton} from './component/ClearButton'
import * as math from 'mathjs'; 
import { re } from 'mathjs';
const App =()=>{
  const [inbutText ,setInbutText]=useState('');

  const addToInbut=(val)=>{ 
      setInbutText(val +inbutText)
 }
 const handelEqials=()=>{
  setInbutText(eval(inbutText))
 }
 
  return (
 <div className='app'>
   <div className='calc-waraper'>
    <Inbut inbut={inbutText}/>
     <div className='row'>
     <Button handleClick={addToInbut}>7</Button>
     <Button handleClick={addToInbut}>8</Button>
     <Button handleClick={addToInbut}>9</Button>
     <Button handleClick={addToInbut}>/</Button>
     </div>
     <div className='row'>
     <Button handleClick={addToInbut}>4</Button>
     <Button handleClick={addToInbut}>5</Button>
     <Button handleClick={addToInbut}>6</Button>
     <Button handleClick={addToInbut}>x</Button>
     </div>
     <div className='row'>
     <Button handleClick={addToInbut}>1</Button>
     <Button handleClick={addToInbut}>2</Button>
     <Button handleClick={addToInbut}>3</Button>
     <Button handleClick={addToInbut}>+</Button>
     </div>
     <div className='row'>
     <Button handleClick={addToInbut}>.</Button>
     <Button handleClick={addToInbut}>0</Button>
     <Button  handleClick={()=>handelEqials()}>=</Button>
     <Button handleClick={addToInbut}>-</Button>
     </div>
     <ClearButton handleClick={()=>{setInbutText('')}}>Clear</ClearButton>
   </div>
      
 </div>

  )
}
export default App ;

Mustafa Suleiman · 22 فبراير 2023

يبدو أن الخطأ ينتج عن استخدام دالة eval() في دالة handelEqials(). في بعض الحالات، قد يكون استخدام دالة eval() خطيرًا ويمكن أن يتسبب في أخطاء في الصياغة أو ثغرات أمنية.

يمكنك محاولة استخدام دالة math.evaluate() بدلاً من دالة eval() من مكتبة mathjs لتجنب هذه المشكلات. استبدل دالة handelEqials() بالتالي:

const handelEqials=()=>{
  setInbutText(math.evaluate(inbutText))
}

تم تعديل الكود المقدم، حيث تم تعديل اسماء بعض الكمبوننتات والدوال لتكون متناسبة مع الكود المعروض، وتم تعديل بعض الخطوات لكي تقوم بعملية الحسابات بشكل صحيح، وتم تعديل الزر "/" ليعمل بشكل صحيح في الحسابات، وتم تعديل الزر "*" ليعمل بشكل صحيح في الحسابات، وتم اضافة الزر "-" لعملية الطرح في الحسابات.

ويمكنك دائمًا استخدام الاختصار الذي سينظم ويزيل جميع الواردات imports غير الضرورية من الملف الحالي

في MAC ، يكون [Ctrl + Option + O] بالنسبة للبعض هو [Option + Shift + O] وبالنسبة للويندوز استبدل option بزر Alt

import React, { useState } from 'react';
import './App.css';
import Button from './components/Button';
import Inbut from './components/Inbut';
import ClearButton from './components/ClearButton';
import * as math from 'mathjs';

const App = () => {
const [inbutText, setInbutText] = useState('');

const addToInbut = (val) => {
setInbutText(inbutText + val);
};

const handleEquals = () => {
const result = math.evaluate(inbutText);
setInbutText(result);
};

return (
<div className="app">
<div className="calc-wrapper">
<Inbut inbut={inbutText} />
<div className="row">
<Button handleClick={addToInbut}>7</Button>
<Button handleClick={addToInbut}>8</Button>
<Button handleClick={addToInbut}>9</Button>
<Button handleClick={() => addToInbut('/')}>/</Button>
</div>
<div className="row">
<Button handleClick={addToInbut}>4</Button>
<Button handleClick={addToInbut}>5</Button>
<Button handleClick={addToInbut}>6</Button>
<Button handleClick={() => addToInbut('*')}>x</Button>
</div>
<div className="row">
<Button handleClick={addToInbut}>1</Button>
<Button handleClick={addToInbut}>2</Button>
<Button handleClick={addToInbut}>3</Button>
<Button handleClick={() => addToInbut('+')}>+</Button>
</div>
<div className="row">
<Button handleClick={addToInbut}>.</Button>
<Button handleClick={addToInbut}>0</Button>
<Button handleClick={handleEquals}>=</Button>
<Button handleClick={() => addToInbut('-')}>-</Button>
</div>
<ClearButton handleClick={() => setInbutText('')}>Clear</ClearButton>
</div>
</div>
);
};

export default App;