基於另一個狀態道具的 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的文檔中有很好的進一步解釋。