Question

我创建了两个自定义挂钩，以管理App中多个组件的状态和功能。我试图在App组件级别启动此挂钩，然后从那里将它们作为道具传递给不同的组件。我遇到的问题是状态随着每次重新渲染而重新启动，这影响了状态更新后正确显示最新信息的能力。

例如，我尝试为仅在（init === true）上调用的函数添加条件，但是这不是最佳方法，因为我无法在条件内部创建变量并将外部变量初始化为null和条件内的重写仅在第一个渲染上起作用，而在下一个渲染上，它将恢复为空。

 function App() {

  const firstHandler = useFirstHandler(); 
  const secondHandler = useSecondHandler();
  /** Each Hook returns an object with a state and several handlers to modify the state. {state, handler1, handler2, handler3, etc...} **/


  return (
    <>
      <Component1 firstHandler={firstHandler} />
      <Component2 firstHandler={firstHandler} secondHandler={secondHandler} />
      <Component3 firstHandler={firstHandler} secondHandler={secondHandler} />
    </>
  );
}

const Component1 = ({...props}) => {
   const {firstHandler} = props;

   const {state, handler1, handler2, handler3} = firstHandler;

   // Rest of application
}

const firstHandler和secondHandler在每次重新渲染中都被执行，从而将每个钩子的状态重置为其初始状态。状态更新后，这会影响正确的数据显示。

使用自定义钩子作为道具在多个组件之间共享状态

0 个答案: