使用react usestate钩子防止每个setstate都被重新发送

Question

我有一些多个状态和函数来使用useState钩子设置状态。

在每个setstate组件上重新渲染。我只想重新呈现setstate的函数完全完成。

例如：

在app.js 中

const [a, setA] = useState(() => false);
const [b, setB] = useState(() => {});
const [c, setC] = useState(() => props.c);
const [d, setD] = useState(null);
const [e, setE] = useState(null);
const [f, setF] = useState(null);
const [g, setG] = useState('');
const func1 = useCallback(data => {
setA(true);
setB(true);
setC(data && data.c);
setD();
setE(isChecked ? 'a' : 'b');
}, []);
const func2 = useCallback(data => {
setA(false);
setB(false);
}, []);
const func3 = useCallback(data => {
setC(false);
setD(false);
}, []);
const events = {
func1,
func2,
func3
};
const handleMessage = e => {
const { eventName, data } = e.data;
const handleEvents = eventName ? events[toCamel(eventName)] : null;
if (handleEvents && typeof handleEvents === 'function') {
handleEvents(data);
}
};
useLayoutEffect(() => {
iframe.addEventListener('message', handleMessage, true);
return () => {
iframe.removeEventListener('message', handleMessage, true);
};
}, []);
return (
<Fragment>
{a && (
Component1
)}
{b && c && (
Component2
)}
</Fragment>

)；

在每个func1和func2上，setA和setB返回语句重新调用元素。我不想在每个setA、setB、setC等上重新渲染。一旦func1或func2完全完成，我只想重新渲染组件。作为一个新手，有人能帮忙吗？

Answer 1

如果您的状态值是如此紧密地联系在一起，并且您希望确保所有内容都立即更新：

const [state, setState] = useState({
a: () => false,
b: () => {},
c: () => props.c,
d: null,
e: null,
f: null,
g: ''
});
const updateState = newState => setState(Object.assign({}, state, newState));

现在，当你想更新你的状态时，只需像这样使用updateState：

const func1 = useCallback(
(data) =>
updateState({
a: true,
b: true,
c: data && data.c,
d: undefined,
e: isChecked ? 'a' : 'b',
}),
[],
);

Answer 2

您可以将所有变量存储在一个状态中，如下所示：

const [state,setState] = useState({ a:false, b:{}, c:props.c,d:null})
const func1 = useCallback(data => {
setstate({a:true,b:true,c:data && data.c,d:null})
}, []);