reactjs - 使用 react 钩子(Hook)操作数组

Question

假设我有一个获取数组的组件，我想做一些逻辑:

const MyComponent = ({ myArray = [] }) => {
  console.log("infinite rendering");
  const [prop, setProp] = useState([])
  useEffect(() => {
    setProp(myArray.map(x => x + 1))
  }, [myArray])

  return <div />
}

https://codesandbox.io/s/x3kq907r5z

问题是我得到了一个无限循环。

我可以通过删除默认值 ({ myArray }) 并检查数组 if (Array.isArray(myArray)) setProp(...) 来修复错误>

但我很难理解: 使用钩子(Hook)对 Prop (数组/对象/等)进行任何类型的操作的最佳方法是什么？

Answer 1

按照您当前编写代码的方式，myArray 是每次渲染时空数组的不同实例。这意味着效果总是会运行，因为依赖关系总是在变化!

这可能看起来很奇怪，但请考虑以下代码:

const a = [];
const b = [];
console.log(a === b); // false

最简单的解决方法是将回退逻辑移到效果中:

const MyComponent = ({ myArray }) => {
  console.log("infinite rendering");
  const [prop, setProp] = useState([]);
  useEffect(
    () => {
      setProp(myArray ? myArray.map(x => x + 1) : []);
    },
    [myArray]
  );

  return <div />;
};

或者确保始终使用相同的空数组作为默认值:

const empty = [];
const MyComponent = ({ myArray = empty }) => {
  console.log("infinite rendering");
  const [prop, setProp] = useState([]);
  useEffect(
    () => {
      setProp(myArray.map(x => x + 1));
    },
    [myArray]
  );

  return <div />;
};