Javascript 当发生更改时如何重新提交列表

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

这是组件

  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>
  );
};

constmultiimagepicker=（{state，onSubmit}）=>{
const[images，setimages]=useState（[]）；
const[items，setitems]=useState（[]）；
const[itemModalOpen，setItemModalOpen，toggleModal]=useModal（）；
const[Visible，setVisible]=useState（false）；
const[modalVisible，setModalVisible]=使用状态（false）；
useffect（（）=>{
console.warn（'un total de'+images.length+'images'）；
}，[图像]；
常量openImagePicker=（）=>{
ImagePicker.openPicker({
多重：对，
这是真的，
waitAnimationEnd：是的，
includexif：是的，
mediaType:'照片'，
//maxFiles:2，
})
。然后（图像=>{
images.map（（图像，索引）=>{
data.append({
uri:images.data，
路径：images.path，
});
设置图像（数据[''部分]）；
});
})
.catch（e=>Alert.Alert（`Error al-cargar imÃgenes:${e}'）；
};
常量openPhotoPicker=（）=>{
ImagePicker.openCamera({
多重：假，
这是真的，
waitAnimationEnd：是的，
})
。然后（（图像、索引）=>{
data.append({
uri:images.data，
路径：images.path，
});
设置图像（数据[''部分]）；
})
.catch（e=>Alert.Alert（`${e}`））；
};
useffect（（）=>{
设置项目（图像）；
}，[图像]；
常量上传=（）=>{
setModalVisible（！modalVisible）；
var newArray=[]；
数据[''部分].forEach（元素=>{
//const itemJSON=元素[0]；
//newArray=newArray.concat（itemJSON）；
newArray=newArray.concat（{uri:element[0].uri}）；
});
setVisible（真）；
提交({
vDocumentB64:newArray，
});
切换模式（真）；
};
常量cleanImages=（）=>{
ImagePicker.clean（）
.然后（（）=>{
log（'从tmp目录中删除了所有tmp映像'）；
setimages（[]）；
数据=新表单数据（）；
console.log（JSON.stringify（data[''u parts']）；
})
.catch（e=>{
警报（e）；
});
};
useffect（（）=>{
让isCancelled=false；
清洁图像（）；
如果（可见&&state.errorMessage！=''）{
setVisible（！Visible）；
}否则{
setVisible（假）；
}
return（）=>{
isCancelled=true；
};
}，[州]；
如果（可见）{
返回(
);
}
返回(
{图像
？项目图（（项目，i）=>{
console.log（项[0]。路径）；
返回(
);
})
：null}
{state.error==true(
setItemModalOpen（假）}
/>
) : (
setItemModalOpen（假）}
/>
)}
openPhotoPicker（）}>
托马尔福托
openImagePicker（）}>
加利亚
{/*  */}
{images.length>=1(
上传（）}>
卡加y连续体
cleanImages（）}>
ELIMINAR IMÁGENES
)：null}
);
};

我认为您的解决方案是： 在上载函数中，您始终只对元素[0].uri进行关联，请尝试对元素[0].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]);

---

我看到您正在使用

数据。append

并且在查看代码之后，数据似乎是一个FormData。有什么理由这样使用它吗？你的

items

状态变量在重新选择图像后得到更新了吗？这就是我不知道怎么做的不，这不起作用，数据['''u parts'].forEach（element=>{newArray=newArray.concat（{uri:element.uri}）；}）；''its on the upload函数，该函数在您在屏幕上渲染图像后触发。您是否尝试返回item.path而不是item[0]。返回图像的路径？