React Redux Promise错误 - (..).然后不是函数

Question

在提出的问题中查看了这个问题，但这是最接近的，它并没有真正解决我的问题。

我有一个代码块(在页面下方详细介绍(作为较大的fetch块的一部分。它可以到达此CodeBlock，并且如果对此代码块进行了评论，即成功进行fetch等，也可以运行正常。并返回JWT没问题，但是...添加此块，我会收到以下错误：

TypeError：(0，_localStoragedRopdowns.confirmselectdataexistance((...(。然后不是函数

它在另一个文件夹中指的是此功能(正确导入(。

export const confirmSelectDataExistance = () => {
  const companyStateShortNameJson = localStorage.getItem(COMPANYSTATESHORTNAME)
  const statesJson = localStorage.getItem(STATES)
  const suburbLocationsJson = localStorage.getItem(LOCATIONS)
  if (companyStateShortNameJson || statesJson || suburbLocationsJson) {
    console.log('something exists in localstorage')
    return true
  }
    console.log('nothing in localstorage')
  return false
}

简单的功能 - 返回真或错误。

，这是第一行上的代码块 - 它是失败的：

    return confirmSelectDataExistance().then(isConfirmed => {
      if (!isConfirmed) {
        dispatch({ type: REQUEST_SELECT_DATA })
        console.log('gets here!', isConfirmed)
        const token = getJwt()
        const headers = new Headers({
          'Authorization': `Bearer ${token}`
        })
        const retrieveSelectData = fetch('/api/SelectData/SelectData', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
        })
          .then(handleErrors)
          .then(response => response.json())
          .then(selectData => {
            dispatch({ type: RECEIVE_SELECT_DATA, payload: selectData })
            saveSelectData(selectData)
          });
        return saveSelectData(selectData);
      }
    })

从我有限的经验中

最后，这是整个动作的整体，因此您可以看到它是如何称呼的。正如我所说的 - 评论块，它可以很好地发挥作用。

export const requestLoginToken = (username, password) =>
  (dispatch, getState) => {
    dispatch({ type: REQUEST_LOGIN_TOKEN, payload: username })
    const payload = {
      userName: username,
      password: password,
    }
    const task = fetch('/api/jwt', {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
    })
      .then(handleErrors)
      .then(response => response.json())
      .then(data => {
        dispatch({ type: RECEIVE_LOGIN_TOKEN, payload: data })
        saveJwt(data)
        return confirmSelectDataExistance().then(isConfirmed => {
          if (!isConfirmed) {
            dispatch({ type: REQUEST_SELECT_DATA })
            console.log('gets here!', isConfirmed)
            const token = getJwt()
            const headers = new Headers({
              'Authorization': `Bearer ${token}`
            })
            const retrieveSelectData = fetch('/api/SelectData/SelectData', {
              method: 'GET',
              headers: {
                'Content-Type': 'application/json;charset=UTF-8'
              },
            })
              .then(handleErrors)
              .then(response => response.json())
              .then(selectData => {
                dispatch({ type: RECEIVE_SELECT_DATA, payload: selectData })
                saveSelectData(selectData)
              });
            return saveSelectData(selectData);
          }
        })
      })
      .catch(error => {
        clearJwt()
        console.log('ERROR - LOGIN!',error)
      })
    addTask(task)
    return task
  }

编辑

我终于在砍掉几个小时后才能工作..这是完成的动作：

export const requestLoginToken = (username, password) =>
  (dispatch, getState) => {
    dispatch({ type: REQUEST_LOGIN_TOKEN, payload: username })
    const payload = {
      userName: username,
      password: password,
    }
    const task = fetch('/api/jwt', {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
    })
      .then(handleErrors)
      .then(response => response.json())
      .then(data => {
        dispatch({ type: RECEIVE_LOGIN_TOKEN, payload: data })
        saveJwt(data)
        // Now check local storage for dropdown data..
        if (!confirmSelectDataExistance()) {
          dispatch({ type: REQUEST_SELECT_DATA })
          const token = JSON.stringify(data)
          const headers = new Headers({
            'Authorization': `Bearer ${token}`
          })
          const retrieveSelectData = fetch('/api/SelectData/SelectData', {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            },
          })
            .then(handleErrors)
            .then(response => response.json())
            .then(selectData => {
              dispatch({ type: RECEIVE_SELECT_DATA, payload: selectData })
              saveSelectData(selectData)
            });
        }
      })
      .catch(error => {
        clearJwt()
        console.log('ERROR - LOGIN!', error)
      })
    addTask(task)
    return task
  }

这是它调用的功能：

export const confirmSelectDataExistance = () => {
  const companyStateShortNameJson = localStorage.getItem(COMPANYSTATESHORTNAME)
  const statesJson = localStorage.getItem(STATES)
  const suburbLocationsJson = localStorage.getItem(LOCATIONS)
  if (companyStateShortNameJson || statesJson || suburbLocationsJson) {
    console.log('something exists in localstorage')
    return true
  }
    console.log('nothing in localstorage')
  return false
}

我从其他尝试中更改的一件事是我使用了"数据"而不是调用" getJwt(("。然后，我使用了该行：

const token = JSON.stringify(data)

要获得我刚刚得到的JWT。

最后，我使用了@karin的答案，然后跑了。(由我投票(

Answer 1

错误并不是说 confirmSelectDataExistance不是一个函数，而是说 then不是从中返回的功能的函数，这是一个布尔值(它等于 false.then(...)，它不起作用(。

如果您正在尝试将then用作条件。在这种情况下，简单的if语句应起作用：

if (confirmSelectDataExistance()) {
    // do things if it returns true
} else {
    // do things if it returns false
}

Answer 2

export const confirmSelectDataExistance = () => {
  return new Promise(function (resolve, reject) {
  const companyStateShortNameJson = localStorage.getItem(COMPANYSTATESHORTNAME)
  const statesJson = localStorage.getItem(STATES)
  const suburbLocationsJson = localStorage.getItem(LOCATIONS)
  if (companyStateShortNameJson || statesJson || suburbLocationsJson) {
    console.log('something exists in localstorage')
    resolve(true)
  }
  console.log('nothing in localstorage')
  reject(false)
 })
}

Answer 3

尝试这样的东西：

export const confirmSelectDataExistance = new Promise((resolve, reject) => {
  const companyStateShortNameJson = localStorage.getItem(COMPANYSTATESHORTNAME);
  const statesJson = localStorage.getItem(STATES);
  const suburbLocationsJson = localStorage.getItem(LOCATIONS);
  if (companyStateShortNameJson || statesJson || suburbLocationsJson) {
    console.log('something exists in localstorage');
    resolve(true);
  }
    console.log('nothing in localstorage');
  reject(false); // or resolve(false) if you want handle this situation inside then block also
});