时间戳

首页 > 解决方案 > 根据另一个状态道具的 Onchange 更改组件状态道具

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

问题描述

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

伪代码

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

标签： javascriptreactjsreact-hooksjsx

解决方案

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

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的文档中有很好的进一步解释。

推荐阅读