当您有更改时如何重新呈现列表反应本机

Question

我在 react native 中有这个组件，它可以从图库中选择一个或多个图像，或者用手机摄像头拍摄图像，问题是它只在你第一次选择图片时显示。 我的意思是，如果您从图库中选择 1 张图片并关闭选择器，它将显示该图片，但是如果您再次按下按钮选择图片并选择另一张图片，则不会显示此图片，但数据已通过，我相信重新渲染有问题，但不知道如何解决

这是组件

  const MultiImagePicker = ({state, onSubmit}) => {
  const [images, setimages] = useState([]);
  const [items, setitems] = useState([]);
  const [itemModalOpen, setItemModalOpen, toggleModal] = useModal();
  const [Visible, setVisible] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);

  useEffect(() => {
    console.warn('un total de ' + images.length + ' imagenes');
  }, [images]);

  const openImagePicker = () => {
    ImagePicker.openPicker({
      multiple: true,
      includeBase64: true,
      waitAnimationEnd: true,
      includeExif: true,
      mediaType: 'photo',
      // maxFiles: 2,
    })
      .then(images => {
        images.map((images, index) => {
          data.append({
            uri: images.data,
            path: images.path,
          });

          setimages(data['_parts']);
        });
      })
      .catch(e => Alert.alert(`Error al cargar imágenes: ${e}`));
  };

  const openPhotoPicker = () => {
    ImagePicker.openCamera({
      multiple: false,
      includeBase64: true,
      waitAnimationEnd: true,
    })
      .then((images, index) => {
        data.append({
          uri: images.data,
          path: images.path,
        });

        setimages(data['_parts']);
      })
      .catch(e => Alert.alert(`${e}`));
  };

  useEffect(() => {
    setitems(images);
  }, [images]);

  const upload = () => {
    setModalVisible(!modalVisible);
    var newArray = [];
    data['_parts'].forEach(element => {
      // const itemJSON = element[0];
      // newArray = newArray.concat(itemJSON);
      newArray = newArray.concat({uri: element[0].uri});
    });

    setVisible(true);
    onSubmit({
      vDocumentB64: newArray,
    });
    toggleModal(true);
  };

  const cleanImages = () => {
    ImagePicker.clean()
      .then(() => {
        console.log('removed all tmp images from tmp directory');
        setimages([]);
        data = new FormData();
        console.log(JSON.stringify(data['_parts']));
      })
      .catch(e => {
        alert(e);
      });
  };

  useEffect(() => {
    let isCancelled = false;
    cleanImages();
    if (Visible && state.errorMessage != '') {
      setVisible(!Visible);
    } else {
      setVisible(false);
    }
    return () => {
      isCancelled = true;
    };
  }, [state]);

  if (Visible) {
    return (
      <Spinner
        size="large"
        visible={Visible}
        color="#D32345"
        textContent={'Por favor espera un momento.'}
        textStyle={styles.spinnerTextStyle}
      />
    );
  }
  
  return (
    <View style={styles.container}>
      <ScrollView>
        {images
          ? items.map((item, i) => {
              console.log(item[0].path);
              return (
                <View key={i} style={styles.imagePreview}>
                  <Image style={styles.image} source={{uri: item[0].path}} />
                </View>
              );
            })
          : null}
      </ScrollView>
      {state.error == true ? (
        <InfoModal
          text={`${
            state.errorMessage !== undefined
              ? state.errorMessage
              : 'Error, las imagenes no pueden estar vacias'
          }`}
          isActive={itemModalOpen}
          handleClose={() => setItemModalOpen(false)}
        />
      ) : (
        <InfoModal
          text={`Documento subido exitosamente.`}
          isActive={itemModalOpen}
          handleClose={() => setItemModalOpen(false)}
        />
      )}
      <View style={styles.Buttonscontainer}>
        <TouchableOpacity
          style={styles.multiImagePickerButton}
          onPress={() => openPhotoPicker()}>
          <Text style={styles.multiImagePickerButtonText}>Tomar foto</Text>
          <Icon name="camera-alt" color="#fff" />
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.multiImagePickerButton}
          onPress={() => openImagePicker()}>
          <Text style={styles.multiImagePickerButtonText}>Galería</Text>
          <Icon name="photo-album" color="#fff" />
        </TouchableOpacity>
      </View>
      {/* <ScrollView> */}
      {images.length >= 1 ? (
        <View>
          <TouchableOpacity
            style={styles.sendmultiImagePickerButton}
            onPress={() => upload()}>
            <Text style={styles.multiImagePickerButtonText}>
              Cargar y continuar
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.clearmultiImagePickerButton}
            onPress={() => cleanImages()}>
            <Text style={styles.multiImagePickerButtonText}>
              ELIMINAR IMÁGENES
            </Text>
          </TouchableOpacity>
        </View>
      ) : null}
    </View>
  );
};

Answer 1

我认为您的解决方案是这样的：在您的上传功能中，您始终只连接 element[0].uri，尝试连接 element.uri

data['_parts'].forEach(element => {
      newArray = newArray.concat({uri: element.uri});
    });

此外，您使用相同的参数 [images] 两次调用 useEffect，您可以执行以下操作：

useEffect(() => {
    setitems(images);
    console.warn('un total de ' + images.length + ' imagenes');
  }, [images]);