Question

我处于以下状态

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

我正在将状态更新为

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

我计算百分比的功能是

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

我的疑问是何时调用此函数（如 useEffect 或普通）并将其存储在 data.percentage 中请帮帮我

Answer 1

尝试在 useState 中执行如下所示的函数，并将状态作为数组 deps 传递，因此每当状态中的任何属性更改时，它都会重新计算，这是您需要的输出。

或者正如 Germa 建议的那样，您可以跳过函数本身并执行以下操作

const [avg, setAvg] = useState(0)

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

我根据讨论添加了 codesandbox，让它处于 diff 状态会更好，否则当您传递数组 deps 时，它会不断变化。

Answer 2

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

Answer 3

像这样：

echo preg_replace('~(?:.+\K\R){5}~', "$0    [next]$0", $string);

useEffect 将在每次数据更改时运行，并且 data.percentage 将重新计算。

Answer 4

首先，我猜百分比应该除以 300。百分比是与您的输入字段相同的数据的一部分，因此每当我们在 useEffect 中设置百分比时，它都会导致无限循环。因此，最好将百分比与受试者的输入数据分开。

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;

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

4 个答案: