延迟更新计算值，直到设置了一些所需的状态

Question

我正在寻求一些帮助，以延迟某些计算数据的显示，直到它所依赖的状态在父组件中设置。在下面的简化示例中，App 的值设置为 0，然后运行一些计算并更新状态。

问题是当Calculate被点击时，更新初始val状态的计算还没有发生，因此从calcOverUnderPayment推导出的最终值是不正确的。

它只会在所有后续点击中显示正确的值。

我能做些什么来解决这个问题？

非常感谢。

function App() {
  const [val, setVal] = useState(0)

  const calculate = () => {
    // code to run some calculations which I then set as state
    setVal(100)
  }

  return (
    <>
      <button onClick={() => calculate()}>Calculate</button>
      <Outcome
        val={val}
      />
    </>
  )
}

function Outcome(val) {
  const calcOverUnderPayment = (value: number, type: string) => {
    if (type === 'under') {
      return (value > 0) ? value : 0
    } else {
      return (value < 0) ? value : 0
    }
  }

  return (
    <>
      Final Val is {calcOverUnderPayment(val)}
    </>
  )
}

Answer 1

我在另一个答案上浏览了你的 cmets。您可以在 Outcome 组件中使用另一个状态变量和 useEffect 挂钩。

function App() {
  // If it is possible, try to change the initial value to null so that the Outcome component can figure out when did the value change.
  const [val, setVal] = useState(null)

  const calculate = () => {
    // code to run some calculations which I then set as state
    setVal(100)
  }

  return (
    <>
      <button onClick={() => calculate()}>Calculate</button>
      <Outcome
        val={val}
      />
    </>
  )
}

function Outcome({ val }) {
  // Use this state to display initial value and update this state instead of calling the function directly in the return
  const [valueToDisplay, setValueToDisplay] = useState('YOUR_INITIAL_VALUE_TO_DISPLAY');

  const calcOverUnderPayment = (value: number, type: string) => {
    if (type === 'under') {
      return (value > 0) ? value : 0
    } else {
      return (value < 0) ? value : 0
    }
  }

 // use useEffect hook to run your function whenever val prop is changed 
  useEffect(() => {
    // If the val prop is null, then it is evident that it is rendering for the first time. 
    // So, don't run the calcOverUnderPayment() method. This is why "null" is important to provide as your initial state for "val" in App component
    if(val !== null) {
      const value = calcOverUnderPayment();
      // set the state variable here to display
      setValueToDisplay(value);
    }
  },[val]) // Give the val prop as the dependency. This tells useEffect to run whenever val prop is changed.

  return (
    <>
      {/* Instead of calling your function here, use the state variable*/}
      Final Val is {valueToDisplay}
    </>
  )
}

这应该可以按您的预期工作。如果您遇到任何问题或不明白，请告诉我。

Answer 2

作为选项之一，您可以只使用条件渲染并渲染您的子组件，仅当状态不是默认值时，在您的情况下，这样的事情会做：

  return( //your components here 
        {val != 0 && <Outcome val={val} />}
       //rest of your component
  )