React Redux 承诺错误 - (...).then 不是函数

Question

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

我有一个代码块（在页面下方稍稍详细说明）作为更大的提取块的一部分。它到达这个代码块并且如果这个代码块被注释掉也可以正常运行，即它执行成功的提取等并返回一个 JWT 没问题，但是......添加这个块，我得到以下错误：

TypeError: (0 , _localStorageDropDowns.confirmSelectDataExistance)(...).then 不是函数

它是指另一个文件夹中的这个函数（正确导入）..

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

根据我有限的经验，“confirmSelectDataExistance”是一个函数，为什么它说它不是？

最后，这里是整个动作的整体，所以你可以看到它是如何调用该块的。正如我所说的 - 将块注释掉，它可以完美运行。..

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