带有redux-saga的firebase“无法读取未定义的属性'split'”答案

【问题标题】：firebase with redux-saga "cannot read property 'split' of undefined"带有redux-saga的firebase“无法读取未定义的属性'split'”
【发布时间】：2021-08-26 10:29:33
【问题描述】：

我在 Next.js 中使用带有 redux-saga 的 firebase

尝试在 Firebase 存储中上传图像文件，但遇到了问题。

// saga
function* uploadImage(action) {
  try {
    const storage = storageService
    const ext = path.extname(action.data.src)
    const basename = path.basename(action.data.src, ext)
    const imageRef = 'images/' + basename + '_' + new Date().getTime() + ext   // images/sample_1629970096998.png
    const storageRef = storage.ref().child(imageRef)  

    const result = yield call(
      [storage, storageRef.put()],
      action.data.file,
    )

    yield put({
      type: UPLOAD_IMAGE_SUCCESS,
      data: result,
    })
  } catch(error) {
    yield put({
      type: UPLOAD_IMAGE_FAILURE,
      error: error.message,
    })
  }
}

上面的代码发送此错误消息： “调用：解压的 fn 参数（来自 [context, fn] 或 {context, fn}）不是函数”

如果我把那个代码改成这个。

function* uploadImage(action) {
  try {
    const storage = storageService
    const ext = path.extname(action.data.src)              // 확장자 추출
    const basename = path.basename(action.data.src, ext)   // 확장자 뺀 이름 추출
    const imageRef = 'images/' + basename + '_' + new Date().getTime() + ext   // images/sample_1629970096998.png

    const result = yield call(
      [storage, storage.ref().child().put()],
      imageRef,
      action.data.file,
    )

    yield put({
      type: UPLOAD_IMAGE_SUCCESS,
      data: result,
    })
  } catch(error) {
    yield put({
      type: UPLOAD_IMAGE_FAILURE,
      error: error.message,
    })
  }
}

它发送此错误：“无法读取未定义的属性'split'”

我不知道如何传递两个参数。有人帮助我。

【问题讨论】：

标签： reactjs firebase google-cloud-firestore redux-saga

【解决方案1】：

我通过这种方式成功将图片上传到了firestore。

function* uploadImage(action) {
  try {
    const storageRef = storageService.ref()

    const ext = path.extname(action.data.src)
    const basename = path.basename(action.data.src, ext)
    const imageRef = 'images/' + basename + '_' + new Date().getTime() + ext   // images/sample_1629970096998.png

    const childRef = yield call(
      [storageRef, storageRef.child],
      imageRef,
    )

    const result = yield call(
      [childRef, childRef.put],
      action.data.file,
    )
    
    yield put({
      type: UPLOAD_IMAGE_SUCCESS,
    })
    // yield put({
    //   type: DOWNLOAD_IMAGE,
    //   data: 이미지 다운로드
    // })
  } catch(error) {
    yield put({
      type: UPLOAD_IMAGE_FAILURE,
      error: error.message,
    })
  }
}

但我似乎没有什么好办法。有人有好主意吗？

【讨论】：