Question

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

伪代码

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

Answer 1

我认为这是您使用它的方式，当金额更改时，将触发使用效果，并且如果金额有任何更改，它也会更新费用。或者，也可以通过在更新第一个状态时设置第二个状态来使其与onChange一起使用。

useEffect(() => {
        setFee(amount)

    }, [amount)])

Answer 2

让我们想象一下您有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文档中的进一步详细说明。

根据另一个状态道具的Onchange更改组件状态道具

2 个答案: