React Redux承诺错误 - (...)。然后不是函数

时间:2017-05-04 06:21:36

标签: javascript reactjs react-redux redux-thunk

在提出的问题中找到了这个,但this是最接近的,并没有真正解决我的问题。

我有一个代码块(在页面上稍微详细一点)作为更大的获取块的一部分..它到达这个代码块并且如果这个代码块被注释掉也可以正常运行,即它可以成功获取等等并且返回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
}

简单函数 - 返回true或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的答案然后继续使用。 (由我投票)

3 个答案:

答案 0 :(得分:3)

错误并不是说confirmSelectDataExistance不是函数,而是说then不是函数返回的函数,它是一个布尔值(它等价于{ {1}},这不起作用。)

如果您似乎尝试使用false.then(...)作为条件。在这种情况下,简单的then语句应该有效:

if

答案 1 :(得分: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)
 })
}

答案 2 :(得分:0)

尝试这样的事情:

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