使用反应钩子操作数组

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(...)

但我很难理解：使用钩子对道具（数组/对象/等）进行任何类型的操作的最佳方法是什么？

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 />;
};