如何计算反应钩子中 state 变化的百分比

Question

i am having the below state

const [data,setData] = useState({maths:null,physics:null,chem:null,percentage:null})

and i was updating the state as

setData({...data,[e.target.name]:e.target.value})

and my fuction for calculating the percentage is

function percentage(data.maths,data.physics,data.chem){ 
     const per = ((data.maths+data.physics+data.chem)/100)*100
return per
}

my doubt is when to call this function(like useEffect or like normal) and store it in data.percentage please help me

Answer 1

Try doing the function in useState as shown below and as mentioned pass the state as the array deps, so whenever any of the property in the state changes it will recalculate, which is your required output.

or as Germa suggested you can skip the function itself and do it something like this

const [avg, setAvg] = useState(0)

useEffect(() => {
    const {
        maths,
        physics,
        chem
    } = data
    const per = ((data.maths + data.physics + data.chem) / 100) * 100
    setState(per)
}, [data])

I have added the codesandbox based on the discussion, having it in diff state will be much more better way, or else when you pass the array deps it will keep on changing.

Answer 2

function percentage(data){ const per = ((data.maths+data.physics+data.chem)/100)*100 return per }

Answer 3

Like so:

useEffect(() => {
    const { maths, physics, chem } = data;
    const percentage = ((maths + physics + chem) / 100) * 100;
    setData({ maths, physics, chem, percentage });
  }, [data]);

the useEffect will run every time data changes, and data.percentage will be recalculated.

Answer 4

First of all, percentage should be divided by 300 I guess. The percentage was a part of the same data as your input field so it was causing infinite loop whenever we were setting percentage in useEffect . So, it's better to separate the percentage from the input data of subjects.

Working Demo

import { useEffect, useState } from "react";

const App = () => {
  const [data, setData] = useState({ maths: 0, physics: 0, chem: 0 });
  const [percentage, setPercentage] = useState(0);

  const fields = [
    { name: "maths", value: data.maths },
    { name: "physics", value: data.physics },
    { name: "chem", value: data.chem }
  ];

  useEffect(() => {
    // Not sure but percentage should be divided 300 I guess
    const per = ((data.maths + data.physics + data.chem) / 300) * 100;
    setPercentage(per);
  }, [data]);

  const handleChange = (e) => {
    console.log(e.target.value);
    setData({
      ...data,
      [e.target.name]: parseInt(e.target.value)
    });
  };

  return (
    <div>
      <h1>Percentage: {percentage}</h1>
      {fields.map((field, idx) => (
        <input
          key={idx}
          placeholder={field.name}
          name={field.name}
          value={field.value}
          onChange={handleChange}
        />
      ))}
    </div>
  );
};

export default App;