基于另一个状态道具的 Onchange 更改组件状态道具

Question

我有一个状态道具，它根据用户输入的输入值（数量）而变化（称之为 firstState.a）。 我的问题是如何根据输入的值更改另一个状态 prop(fee, secondState.b)。 我以为我可以通过让 firstState.a 成为在它发生变化时触发 useEffect 的依赖项，有条件地 setState 在 UseEffect 中的 secondState 。 我有什么不明白的。

伪代码

useEffect(()=>{
  if(...) {
    setSecondState(secondstate.b)
  } else { 
    setSecondState(secondstate.b)
  }
}, [firstState.a])

Answer 1

我认为这是您需要使用它的方式，当数量发生变化时，useEffect 将被触发，如果数量发生任何变化，它也会更新费用。 或者您也可以通过在更新第一个状态时设置第二个状态来使其与 onChange 一起使用。

useEffect(() => {
        setFee(amount)

    }, [amount)])

Answer 2

让我们想象一下你有两种不同的状态：

const [stateA, setStateA] = useState('');
const [stateB, setStateB] = useState('');

挂载后运行的第一个效果，让我们触发stateA更改（理想情况下不是这种情况，但为了示例而将其保留在这里 - 也许它来自 API 调用，这可能会在用户的onchange事件上触发，例如输入字段）：

useEffect(() => {
  setStateA('value');
}, []);

一旦stateA根据依赖数组及其值发生更改，将触发第二个效果，您可以使用首选值调用setStateB ：

useEffect(() => {
   if (stateA === 'value') {
      setStateB('first condition applied');
   } else {
      setStateB('second condition applied');
   }
}, [stateA]);

函数组件主体的完整示例：

const [stateA, setStateA] = useState('');
const [stateB, setStateB] = useState('');

useEffect(() => {
  setStateA('value');
}, []);

useEffect(() => {
   if (stateA === 'value') {
      setStateB('first condition applied');
   } else {
      setStateB('second condition applied');
   }
}, [stateA]);

在Using the Effect Hook的文档中有很好的进一步解释。