如何避免setState在React钩子中的useEffect

Question

我创建了一个简单的calculator，并在其中任何值发生更改时计算所有值。

但我遇到了CCD_ 2的问题。我知道这是由setState和触发useEffect然后再次设置State引起的。

那么我该如何避免这种情况呢？

CodeSandBox

import "./styles.css";
import { useEffect, useState } from "react";
export default function App() {
const [state, setState] = useState([
{ name: "label1", value: 0 },
{ name: "label2", value: 0 },
{ name: "label3", value: 0 }
]);
const handleChange = (name) => (e) => {
const value = e.target.value;
const updated = state.map((item) => {
if (item.name === name) {
return { name, value };
}
return item;
});
setState(updated);
};
useEffect(() => {
const calculate = () => {
const base1 = 99999;
const base2 = 0.3;
const base3 = 0.078;
const val1 = base1 * base2;
const val2 = val1 / base1;
const val3 = val1 + (base1 - val1) * base3;
const updated = [
{ name: "label1", value: val1 },
{ name: "label2", value: val2 },
{ name: "label3", value: val3 }
];
// const updated2 = state.map((item, index) => updated[index]);
// setState(updated)
};
calculate();
}, [state]);
return (
<div className="App">
{state.map(({ name, value }, index) => (
<p key={index}>
{name}: <input value={value} onChange={handleChange(name)} />
</p>
))}
</div>
);
}

Answer 1

您只需删除数组依赖项中的state，因为当state更改时，它将触发useEffect

useEffect(() => {
const calculate = () => {
const base1 = 99999;
const base2 = 0.3;
const base3 = 0.078;
const val1 = base1 * base2;
const val2 = val1 / base1;
const val3 = val1 + (base1 - val1) * base3;
const updated = [
{ name: "label1", value: val1 },
{ name: "label2", value: val2 },
{ name: "label3", value: val3 }
];
setState(preState => preState.map((item, index) => updated[index]))
};
calculate();
}, []);

Answer 2

在触发setState:之前，您可以检查新值是否与当前状态不同

const updated2 = state.map((item, index) => updated[index]);
if(updated2 !== state) setState(updated)

您也可以考虑从useEffect中提取calculate((，并在handleChange 中调用它