在 React 中同步两个状态而没有无限循环

Question

如何保持两个相关值的同步，如下面的代码所示，而不产生无限循环？

如果使用 value1 = 3 的 setter，我想更新 value2 = '3'。

import React, {useState, useEffect} from 'react';

const [value1, setValue1] = useState(1);
const [value2, setValue2] = useState('1');

useEffect(() => {
  setValue2(`${value1}`);
}, [value1]);

useEffect(() => {
  setValue1(parseInt(value2));
}, [value2]);

useEffect(() => {
  setValue1(3);
}, []);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

不要使用两个有状态值 - 相反，仅使用一个有状态值，并在需要时转换类型：

const [value1, setValue1] = useState(1);
const value2 = String(value1);

这种技术可以在 React 中的任何地方使用，你有一个变量的值可以完全根据另一个变量的当前值来确定 - 有一个有状态变量，来源，并在需要时计算第二个变量。

为了争论，另一种可行的方法是将两者组合成一个对象：

const [values, setValues] = useState({
  num: 1,
  str: '1'
});

然后要更新它们，请调用 setValues 一次以串联更新它们 - 但在大多数情况下第一种方法可能更容易。

在 React 中同步两个状态而没有无限循环

Sync two state without infinite loop in React

infinite-loop

reactjs

use-effect

use-state