Lodash isEqual 对于相同的对象返回 false

Question

我正在使用 React Native

memo

来决定我的组件是否应该重新渲染。我的道具需要的不仅仅是浅层比较，所以我想我可以使用

Lodash

isEqual

。然而，由于某种原因，它对于相同的对象返回 false。问题是一个 prop

userChildren

，它是一个对象数组。为了让它工作，我需要重新映射整个数组，我不明白为什么需要这样做。

const areEqual = (
  { userChildren: prevChildren, ...prevProps },
  { userChildren: nextChildren, ...nextProps }
) => {
  console.log(
    _.isEqual(
      prevChildren.map((p) => ({ ...p })),
      nextChildren.map((p) => ({ ...p }))
    )
  ); // Returns true
  console.log(_.isEqual(prevChildren, nextChildren)); // Returns false
  console.log(prevChildren);
  console.log(nextChildren);
  return (
    _.isEqual(prevProps, nextProps) &&
    _.isEqual(
      prevChildren.map((p) => ({ ...p })),
      nextChildren.map((p) => ({ ...p }))
    )
  );
};

export default memo(RootNavigator, areEqual);

日志输出如下：

 LOG  true
 LOG  false
 LOG  [{"birthDate": "2022-09-14", "firstName": null, "gender": null, "id": "189", "showGender": null, "userId": "XXX"}]
 LOG  [{"birthDate": "2022-09-14", "firstName": null, "gender": null, "id": "189", "showGender": null, "userId": "XXX"}]

编辑

似乎有一些

nextProps

破坏了 isEqual:

console.log(
  'nextChildren',
  _.isEqual(
    [
      {
        birthDate: '2022-09-14',
        firstName: null,
        gender: null,
        id: '189',
        showGender: null,
        userId: 'XXX',
      },
    ],
    nextChildren
  )
);
console.log(
  'prevChildren',
  _.isEqual(prevChildren, [
    {
      birthDate: '2022-09-14',
      firstName: null,
      gender: null,
      id: '189',
      showGender: null,
      userId: 'XXX',
    },
  ])
);

给出日志输出：

LOG  nextChildren false
LOG  prevChildren true

Answer 1

我在比较相同的项目时遇到了相同的错误，并且 isEqual 返回 false，因为我的项目的类型彼此不同，就像这样

{"value":"2269","label":"Xã Thượng Lâm"} 
{"label":"Xã Thượng Lâm","value":2269}

调整类型后正常运行正确