如何在REACT中为连接到node.js的Axios路由创建单独的文件夹

1sbrub3j  于 2022-11-22  发布在  Node.js
关注(0)|答案(2)|浏览(139)

你好,我试图创建一个单独的文件夹为我的axios路线。我不希望他们在我的组件文件内的React。
我已经在下面的文件夹下尝试了这个,与我的组件文件夹分开。src〉actions〉authentication

import axios from 'axios';

export const signupUser = (user, history) => dispatch => {
  axios.post('http://localhost:3000/signup', user)
  console.log(user)
    .then(res => history.push('/login'))
    .catch(err => {
      console.log(err);

    });
};

在Signup.js组件中,我有以下内容,它们当前不起作用

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { signupUser } from '../actions/authentication';
import axios from 'axios';

let today = new Date();
let date = today.getFullYear()+ '-' +  (today.getMonth()+1)+ '-' +today.getDate();



class Signup extends Component {

  constructor() {
    super()
    this.state = {
      first_name: '',
      last_name: '',
      user_name: '',
      email: '',
      password: '',
      created_on: date,
      isSignedup: false
    }

    this.handleInputChange = this.handleInputChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
    console.log(this.state);
  }

  handleSubmit = (e) => {
    e.preventDefault();

    const user = {

      first_name: this.state.first_name,
      last_name: this.state.last_name,
      email: this.state.email,
      user_name: this.state.user_name,
      password: this.state.password,
      created_on: this.state.created_on,
      isSignedup: !this.state.isSignedup
    }
    .then(data => {
      console.log(data);
      this.props.history.replace('/login');
    })
    .catch(err => {
      console.log(err);
    })
  }

只有在我的组件〉Signup.js中,如果我在组件中有如下的实际axios路由,它才能工作:

handleSubmit = (e) => {
    e.preventDefault();

    axios.post('http://localhost:3000/signup', {

      first_name: this.state.first_name,
      last_name: this.state.last_name,
      email: this.state.email,
      user_name: this.state.user_name,
      password: this.state.password,
      created_on: this.state.created_on,
      isSignedup: !this.state.isSignedup
    })
    .then(data => {
      console.log(data);
      this.props.history.replace('/login');
    })
    .catch(err => {
      console.log(err);
    })
  }

我一直收到的错误是then不是一个函数。有人能帮我解决这个问题吗?提前谢谢。

luaexgnf

luaexgnf1#

由于以下代码,您将得到错误.then is not a function

const user = {

  first_name: this.state.first_name,
  last_name: this.state.last_name,
  email: this.state.email,
  user_name: this.state.user_name,
  password: this.state.password,
  created_on: this.state.created_on,
  isSignedup: !this.state.isSignedup
}
.then

这不是有效的javascript。将一个对象赋给一个变量并不会产生承诺。你必须实际调用signupUser
此外,我不明白为什么你传递调度到您的注册函数,如果你从来没有调用它?

cfh9epnr

cfh9epnr2#

您的思路是正确的,因为它使应用程序的设计更加模块化。
你可以创建一个名为apis/的文件夹,它不一定要这么叫,但我只是给你一个例子。然后在里面创建一个名为myjson.js的文件,你可以用你认为最好的名字来命名它。在这个文件夹里,你会看到这样的东西:

import axios from "axios";

export default axios.create({
  baseURL: "https://api.myjson.com"
});

然后,您可以在操作创建器中实现myJson.post()
你也可以这样做:

import React, { Component } from "react";
import axios from "axios";

const ROOT_URL =
  "https://exampleurl.com";

class SignUpForm extends Component {
  state = { phone: "" };

  handleSubmit = () => {
    axios
      .post(`${ROOT_URL}/createUser`, {
        phone: this.state.phone
      })
      .then(() => {
        axios.post(`${ROOT_URL}/requestOneTimePassword`, {
          phone: this.state.phone
        });
      });
  };

当然,以上是基于一次性密码类型的身份验证,因此可以根据您的体系结构的逻辑对其进行调整。
另外,如果要将constructor函数与super(props)一起使用,则需要像我刚才所做的那样将props传递给它。
您可以通过使用ES 7并仅分配

state = {
  first_name: '',
  last_name: '',
  user_name: '',
  email: '',
  password: '',
  created_on: date,
  isSignedup: false
}

您已经在handleSubmit中使用了箭头函数,因此无需执行以下操作:箭头函数负责处理this的上下文。
我们可以进一步使用ES 7 async/await语法重构handleSubmit函数,使其看起来更简洁,如下所示:

handleSubmit = async () => {
 await axios.post(`${ROOT_URL}/createUser`, {
   phone: this.state.phone
 });
 await axios.post(`${ROOT_URL}/requestOneTimePassword`, {
   phone: this.state.phone
 });
};

为了处理错误,因为我们使用async/await,我们可以用try/catch块 Package 所有等待的内容,如下所示:

handleSubmit = async () => {
    try {
      await axios.post(`${ROOT_URL}/createUser`, {
        phone: this.state.phone
      });

      await axios.post(`${ROOT_URL}/requestOneTimePassword`, {
        phone: this.state.phone
      });
    } catch (err) {
      console.log(err);
    }
  };

因此,您可以通过这种方式捕获并在控制台上记录错误。
尝试/捕捉并不是ES 2015/16/17的新功能,它已经存在了一段时间。
本质上,每当你想处理由await语句管理的请求引发的错误时,我们可以用try/catch语句 Package 它。
失败的网络请求响应将作为错误对象传入,我们可以控制台记录它以查看发生了什么。

相关问题