React hooks的useState初始化不会重置状态

Question

所以我有一个公共组件，它的状态片段应该在每次访问另一个页面时用不同的值初始化。在这里，我将不同的页面分别标记为A页和b页。

在组件中我有一个初始化函数来初始化状态，如下所示:

const stateInit = (inputArray) => {
  const initializedValue = {};
  // Do some condition logic to store initial value into the const variable
  // log to see the changes
  console.log("initializedValue: ", initializedValue);
  return initializedValue
}

在我的功能组件中，我声明了如下状态:

const [myState, setMyState] = useState<Object>(stateInit(props.inputArray));
// log to see the changes
console.log("myState: ", myState);

inputArray将根据我在A, B的哪一页而有所不同。

这个问题只发生在页面A <->B

预期的行为是当我在两个页面之间切换时，第一个控制台日志将是与我所处的页面相关的新值，第二个控制台日志将使用与页面相关的新值初始化状态。

实际的行为是当我在两个页面之间切换时，第一个控制台日志将是与我所在页面相关的新值，但第二个控制台日志具有先前初始化值的状态。

我似乎不明白为什么状态没有正确初始化。有人知道这是怎么回事吗?

Answer 1

如果两个页面使用相同的功能组件实例，则只对所有页面初始化一次myState，然后在它们之间传递该值。可能会产生误导的是，stateInit将在每次呈现时被调用，但它的值将被丢弃，除了组件第一次实例化的时间。您可能想使用延迟初始状态:

useState<Object>(() => stateInit(props.inputArray))

找出组件实际创建的时间(stateInit将只在那时被调用)。

Answer 2

你能分享你的完整代码吗?这可能是因为props.inputArray在从A->B更改时未定义，但如果没有其他代码，我无法确认。

祝你好运