Question

全新的JS，反应，减少和thunk一起。我从端点获取数据，如果fetch被解析或拒绝，我想站点加载/显示错误，但不知何故我不能调用。然后我在actioncreator中返回fetch。

//projectApi.js
function add(project){
  const requestOptions = {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(
        project
    )
  };

  return fetch(config.apiUrl + "/projects", requestOptions).then(handleResponse);
}

function handleResponse(response) {
  return new Promise((resolve, reject) => {
    if (response.ok) {
      var contentType = response.headers.get("content-type");
      if (contentType && contentType.includes("application/json")) {
        response.json().then(json => resolve(json));
      } else {
        resolve();
      }
    } else {
      response.json().then(json => reject(json));
    }
  });
}

然后在我的ActionCreator中我这样做：

//projectActions.js
function add(project){
  return dispatch => {
      dispatch(request());
      return projectApi.add(project)
        .then( project => {
          dispatch(success(project));
        },
        error => {
          dispatch(failure(error));
        }
      );
    };

  function request() {
  // left out for brevity
  }
  function success(project) {
  // left out for brevity
  }
  function failure(error) {
  // left out for brevity
  }
}

然而，如果我现在尝试。然后我发送......

//SomePage.js
  handleSubmit(e) {
    e.preventDefault();

    var project = { name: this.state.projectName };

    this.props.add(project).then(...);

  }

...

function mapDispatchToProps(dispatch) {
  return {
      add: (project) => {
          dispatch(projectActions.add(project));
      }
    };
}

我得到＆＃34; TypeError：this.props.add（...）未定义＆＃34;但是所有操作都已正确分派。（例如请求，失败，成功）并且商店已更新。

对不起，如果这是一个非常愚蠢的错误。

不能。然后在react / redux / thunk中做出承诺

0 个答案: