小编Emr*_*mre的帖子

在useEffect内部，我有一个props依赖项（setIsValid）。当我将此依赖项添加到useEffect时，它会陷入无限循环。

调用子组件时为父：

const setIsValid = (bool) => {
  const tmpStateCopy = Object.assign({}, state);
  tmpStateCopy.isValid = bool;

  setState(tmpStateCopy);
};

return <Child
  setIsValid={setIsValid}
/>

在子组件中：

const { setIsValid } = props;

const [state, setState] = useState({
  transformations: [],
  duplicateIndexes: []
});

const { transformations, duplicateIndexes } = state;

useEffect(() => {
  const invalids = transformations.find(x => (x.value === '' || x.replaceWith === ''));
  const hasDuplicates = duplicateIndexes.length > 0;
  const isValid = ((invalids === undefined) && (transformations.length > 0) && !hasDuplicates);

  setIsValid(isValid) …

我想通过在 useEffect 内部将窗口位置设置回之前的状态来滚动到之前的窗口位置。为了获取之前的状态，我使用了 useRef。

该组件曾经是基于类的，并且在那里它工作得非常完美。当我将其重构为钩子后，这种“不稳定”的行为就开始了。

useRef一开始就宣告权利

const scrollRef = useRef(window.pageYOffset);

每当组件重新渲染时：

scrollRef.current = window.pageYOffset;

当状态更新时：

useEffect(() => {
  window.scrollTo(0, scrollRef.current)
});

完整代码：

export default () => {
   const scrollRef = useRef(window.pageYOffset);
   ...
   scrollRef.current = window.pageYOffset;
   useEffect(() => {
      window.scrollTo(0, scrollRef.current)
   });

   return (
      ...
   );
}

在状态更新时，我想通过不出现这种“不稳定”行为来改回之前的窗口位置。（摇晃是指看起来他滚动到顶部，然后滚动到上一个位置，所以看起来像摇晃）