使用反应钩子操作数组

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

来修复错误

但我很难理解：使用钩子对道具 (array/object/etc) 进行任何类型的操作的最佳方法是什么？

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

Answer 2

But I'm struggling to understand: What is the best way of doing any sort of manipulation to a prop (array/object/etc) using hooks?

当您尝试操纵本地状态值而不是道具时，挂钩非常有用。您使用 useState() 定义一个状态，然后使用 useEffect() 或其他事件处理程序来更新该值。

prop 正在组件外部更改，这会触发功能组件 re-execute。所以，回答你的问题：你不会用钩子操纵道具。你能做的最好的事情就是在使用 useMemo() 改变 props 时阻止渲染，但那是另一个话题了。

话虽如此，你的例子可以变成：

const MyComponent = ({ myArray = [] }) => {

    console.log("runs when myArray changes");

    const newArray = myArray.map(x => x + 1);

  return <div />
}

使用反应钩子操作数组

Manipulate array with react hooks

reactjs

react-hooks