React Native中CameraRollPicker上传Firebase二次进入报错求助：空对象引用

嘿，我之前也踩过这个坑！这个报错Attempt to invoke interface method 'java.lang.String com.facebook.react.bridge.ReadableMap.getString(java.lang.String)' on a null object reference本质是第二次触发上传流程时，FileReader模块拿到的数据源是null，大概率是组件状态残留或者资源没正确释放导致的。下面是我亲测有效的解决方法：

可能的原因 #

第一次上传后，CameraRollPicker的选中状态、FileReader实例或者图片资源引用没有被彻底清理，第二次进入时这些残留的无效引用被重复调用，就会触发null指针异常。

具体解决方案 #

1. 每次进入上传流程前重置状态 #

确保和图片选择、上传相关的状态都被清空，避免残留旧的无效数据：

// 假设你用的是函数组件，用useState管理状态
const [selectedImages, setSelectedImages] = useState([]);
const [isUploading, setIsUploading] = useState(false);

const openImagePicker = () => {
  // 重置所有相关状态
  setSelectedImages([]);
  setIsUploading(false);
  // 再打开CameraRollPicker
};

2. 强制CameraRollPicker重新渲染 #

如果是复用同一个Picker组件，第二次打开时可能没有刷新内部状态。给组件加一个动态key，每次打开时更新key，强制组件重新初始化：

const [pickerKey, setPickerKey] = useState(0);

const openImagePicker = () => {
  setPickerKey(prevKey => prevKey + 1); // 更新key触发组件重建
  setSelectedImages([]);
};

// 渲染Picker时传入key
<CameraRollPicker
  key={pickerKey}
  selected={selectedImages}
  onSelectedImage={(image) => setSelectedImages([...selectedImages, image])}
  // 其他配置props...
/>

3. 清理FileReader实例（如果手动使用了的话） #

如果你的上传逻辑里手动创建了FileReader，每次使用前要终止之前的实例并清空，避免残留引用：

let fileReaderInstance = null;

const handleImageUpload = async (imageUri) => {
  // 先清理旧的实例
  if (fileReaderInstance) {
    fileReaderInstance.abort();
    fileReaderInstance = null;
  }

  fileReaderInstance = new FileReader();
  // 后续的读取、上传逻辑...
};

4. 上传完成/失败后及时清理资源 #

不管Firebase上传成功还是失败，都要清空选中的图片状态，避免无效引用留存：

const uploadToFirebase = async (imageUri) => {
  const storageRef = firebase.storage().ref(`uploads/${Date.now()}`);
  try {
    await storageRef.putFile(imageUri);
    console.log('上传成功！');
  } catch (error) {
    console.error('上传失败:', error);
  } finally {
    // 不管结果如何，都重置状态
    setSelectedImages([]);
    fileReaderInstance = null; // 如果有FileReader实例也清空
  }
};

按照这些步骤调整后，第二次进入上传流程时组件会以全新的状态初始化，就不会再出现null引用的错误啦！

内容的提问来源于stack exchange，提问作者gynther