useState не рендерится, пока я не скопирую массив - PullRequest
1 голос
/ 19 октября 2019

В реактивном нативном проекте я использую 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), и это, похоже, помогло. Я новичок в ловушках (на самом деле это мой первый компонент ловушек), и я не вижу ничего явно упомянутого в учебнике по реагированию, объясняющего это. Я уверен, что у одного из вас умных людей есть объяснение этому, пожалуйста? :)

1 Ответ

2 голосов
/ 19 октября 2019

Из документации https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update:

Если вы обновите хук состояний до того же значения, что и текущее состояние, React будет спасаться без визуализации дочерних элементов или эффектов стрельбы. (React использует Object.is алгоритм сравнения .)

И response-native-camera-roll-picker вызывает callback(selected, image) с измененным массивом (т. Е. «То же значение, что и текущее состояние», даже если оно содержит различные элементы внутри).

...