React Promise:TypeError:无法读取未定义的属性'then'

时间:2017-09-02 14:15:09

标签: javascript jquery reactjs promise es6-promise

我需要在我的API上发布一些内容。 我有这个功能正常工作:

TradeContainer.js:

callApi(action){
  var actionInfo = {
      user_id: this.props.currentUser.id,
      action: action
  }

  fetch('http://localhost:3000/actions', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(actionInfo)
  })
  .then(res => res.json())
  .then(data => console.log(data))
 }

我想将fetch()移动到另一个文件,我从那里进行所有API调用。在那个文件中,我已经有了几个获取函数(使用get方法),它们工作正常。 但是当我使用post方法将此fetch()移动到该文件时,我收到一个错误:

  

TypeError:无法读取未定义的属性'then'

我的代码:

TradeContainer.js:

import { saveAction } from '../components/apiCalls.js'

callApi(action){
  var actionInfo = {
      user_id: this.props.currentUser.id,
      action: action
  }

   //this is fetch() function that i moved to apiCalls.js file. 
   //And this two lines of code throw an error.
  saveAction(actionInfo)
  .then(data => console.log(data))
 }

apiCalls.js

export function saveAction(actionInfo){
  fetch('http://localhost:3000/actions', {
   method: 'POST',
   headers: {
   'Accept': 'application/json',
   'Content-Type': 'application/json'
   },
   body: JSON.stringify(actionInfo)
  })
  .then(res => res.json())
}

.then(res => res.json())返回“ok”和200。 但 saveAction(actionInfo)会返回 undefined 。怎么会?

2 个答案:

答案 0 :(得分:2)

函数saveAction不会返回任何内容(具体而言 - 不会返回承诺),因此您无法在该函数上使用then

export function saveAction(actionInfo){
  fetch({
     ...
  })
  .then(res => res.json())
}

您可以返回fetch(这是一个承诺),然后您可以在该函数上使用then

export function saveAction(actionInfo){
  return fetch({
     ...
  })
  .then(res => res.json())
}

答案 1 :(得分:-1)

如果它对像我这样的新手有任何帮助,请确保returnfetch声明位于同一行,或围绕括号中的fetch声明。 避免这个!它还会导致Cannot read property 'then' of undefined错误。

function fetchData(){
    return 
       fetch(url)
        .then(response => response.json())
    } 

试试这个。

function fetchData(){
    return (
      fetch(url)
        .then(response => response.json()))
    }