Question

在本机项目中，我正在使用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>
  );
};

选择图像时，以上内容不会重新渲染组件。

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

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

景气有效。现在，我怀疑setState不能以某种方式检测到状态的变化，因此不会再次呈现该组件。因此，我认为我应该创建数组的副本（例如map），这似乎可以解决问题。我是钩子的新手（实际上是我的第一个钩子组件），并且我看不到任何在React教程中明确提到的内容。我确定你们当中有一个聪明人对此有一个解释吗？：）

Answer 1

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

如果将状态挂钩更新为与当前状态相同的值，React将纾困，而不会渲染子代或发射效果。（反应使用Object.is comparison algorithm。）

并且react-native-camera-roll-picker用一个突变数组（即“与当前状态相同的值”，即使其中包含不同的项）调用callback(selected, image)。

除非我复制数组，否则useState不会重新呈现

1 个答案: