如何使用 React Hooks 更改多个条目？答案

【问题标题】：How to change multiple entries with React Hooks?如何使用 React Hooks 更改多个条目？
【发布时间】：2019-11-29 17:22:34
【问题描述】：

如何实时动态更改其他条目？

当我输入value1 时，我想立即更改value2 和value3，然后与其他字段相同。

我知道我应该使用 useEffect，但是当我想到如何同时对几个不同的输入执行此操作时，我感到怀疑。

我试试这个...

export default function Performance() {
  const myVariableProp = 20;
  const [value1, setValue1] = useState('');
  const [value2, setValue2] = useState('');
  const [value3, setValue3] = useState('');

  // on change text value1 dynamically change other values
  useEffect(() => {
    setValue2(value1 * 4);
    setValue3(value1 / 4);
  }, [myVariableProp, value1]);

  // on change text value2 dynamically change other values
  useEffect(() => {
    setValue1(4.2 / 32500);
    setValue3(value1 / myVariableProp);
  }, [myVariableProp, value1]);

  // on change text value3 dynamically change other values
  useEffect(() => {
    const math = myVariableProp * value2;
    setValue1(math);
    setValue2(value1 * myVariableProp * 4.2);
  }, [myVariableProp, value2, value1]);

  return (
    <View>
      <Text>Performance</Text>
      <TextInput
        value={value1}
        onChangeText={setValue1}
        style={{backgroundColor: '#e3e3e3'}}
      />

      <TextInput
        value={value2}
        onChangeText={setValue2}
        style={{backgroundColor: '#f3e3e3'}}
      />

      <TextInput
        value={value3}
        onChangeText={setValue3}
        style={{backgroundColor: '#c3e3e3'}}
      />
    </View>
  );
}

【问题讨论】：

myVariableProp 不是变量，它是一个 const 初始化为文字值...？
就是这样，我试图模拟为一个导航参数只是为了这个例子，对不起。
那些计算真的很奇怪。第一个很简单，但您的后两个更改 value1 基于对 value1 的更改，这将无限循环。

标签： javascript react-native react-hooks

【解决方案1】：

为什么不这样

const setValue1Handler =(newValue1) => {
    setValue1(newValue1);
    setValue2(newValue1 * 4);
    setValue3(newValue1 / 4);
}

<TextInput
   value={value1}
   onChangeText={setValue1Handler}
   style={{backgroundColor: '#e3e3e3'}}
 />

其他功能也一样:)

如有问题欢迎评论

【讨论】：

这行不通。当您执行setValue1 然后立即调用setValue2(value1 * 4); 时，value1 将不会更新，因此将使用旧值value1。
再次检查，我们使用的是函数参数中的值 :) 不是状态 [也许需要一些更好的名称 :v--]
这是一个非常通用的答案，但这是我建议 OP 进入的方向。如果它更具体地针对 OP 的问题，那将是一个更好的答案，但是OP的问题很奇怪，很难做到这一点。不过，我肯定会做的一件事是更改该参数名称，这样人们就不会像@Clarity 那样感到困惑。像这样隐藏状态变量是一个非常糟糕的主意。
对，我的错，这就是为什么可变阴影是一个坏主意；）
参数改变

【解决方案2】：

作为useEffect的第一个参数传递的函数，可以在某些变量发生变化时执行。这些变量作为 useEffect 的第二个参数在数组中传递。例如：

 // on change text value1 dynamically change other values
  useEffect(() => {
    setValue2(value1 * 4);
    setValue3(value1 / 4);
  }, [value1]);

  // on change text value2 dynamically change other values
  useEffect(() => {
    setValue1(4.2 / 32500);
    setValue3(value1 / myVariableProp);
  }, [value2]);

  //etc...

https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

【讨论】：