除非我复制数组，否则 useState 不会重新渲染

Question

在一个 react-native 项目中，我使用的是 react-native-camera-roll-picker。这个想法是用户选择一个图像，并且标题更改为“x selected”之类的内容。试图用钩子来解决这个问题。代码如下：

import React, { useState } from 'react';
import RNCameraRollPicker from 'react-native-camera-roll-picker';
import { Header } from './header';
import { Container, Content } from 'native-base';

export const CameraRollPicker = props => {
  const [images, setImages] = useState([]);

  return (
    <Container>
      <Header title={images.length + ' Selected'} />
      <Content>
        <RNCameraRollPicker
          selected={images}
          callback={imgs => setImages(imgs)}
          groupTypes="All"
        />
      </Content>
    </Container>
  );
};

When an image is selected the above does not re-render the component.

现在，如果我将回调线更改为：

callback={imgs => setImages(imgs.map(i => i))}

繁荣它的工作原理。现在我怀疑setState 不知何故没有检测到状态的变化，因此不会再次渲染组件。因此，我认为我应该创建一个数组的副本（例如map），这似乎可以解决问题。我是钩子的新手（实际上是我的第一个钩子组件），我看不到反应教程中明确提到的任何内容来解释这一点。我敢肯定你们中的一个聪明人对此有解释吗？ :)

Answer 1

来自文档https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update：

如果您将 State Hook 更新为与当前状态相同的值，React 将退出而不渲染子级或触发效果。 （React 使用 Object.is comparison algorithm。）

---

而react-native-camera-roll-picker 用一个变异数组调用callback(selected, image)（即“与当前状态相同的值”，即使它内部包含不同的项目）。