IT技术 - 无法通过 axios 从本地 json 文件中获取数据 - 吾爱随笔录

无法通过 axios 从本地 json 文件中获取数据

IT技术 reactjs axios

2021-04-13 07:27:39

我正在使用 axios 库从本地 json 文件中获取数据，但是当我发出 get 请求时，它给我错误 404 not found。这是我的文件结构。

我正在使用此代码来获取数据。

  import React from 'react';
import axios from 'axios';
class Login extends React.Component{
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = { username: null, password: null };
  }

 handleSubmit = (e)=>{
   e.preventDefault();
   var username=e.target.username.value;
   var password=e.target.password.value;
   axios.get('../data.json')
   .then((res)=>{
     console.log(res.data);
   }).catch((err)=>{
     console.log(err);
   })

 }

  render(){

    return(
      <form onSubmit={this.handleSubmit}>
      <input id="username" name="username" type="text" />
      <input id="password" name="password" type="text" />
      <button>Login!</button>
      </form>
    );
  }
}

export default Login;

我该如何解决这个问题？？

2个回答

如果您使用create-react-app命令创建了此文件结构，则必须将 json 文件添加到公共文件夹中。然后像波纹管一样改变你的 axios 路径

 handleSubmit = (e)=>{
   e.preventDefault();
   var username=e.target.username.value;
   var password=e.target.password.value;
   axios.get('./data.json')
   .then((res)=>{
     console.log(res.data);
   }).catch((err)=>{
     console.log(err);
   })

您是否在服务器上运行 JSON 文件。试试这个命令。

json-server -w -p 3001 data.json - 在端口 3001 上运行

import React from 'react';
import axios from 'axios';
class Login extends React.Component{
  constructor(){
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {username: null, password: null };
  }

 handleSubmit = (e)=>{
   e.preventDefault();
   var username=this.refs.username.value;
   var password=this.refs.password.value;
   
    axios.get('../data.json')
    .then((res)=>{
     console.log(cb(res.data));//included the call back method
    }
    ).catch((err)=>{
     console.log(err);
    }
    )
    }

  render(){
      return(
      <form>
      <input ref="username" type="text" />
      <input ref="password" type="text" />
      <input type="submit" value="Login" onClick={this.handleSubmit} />
      </form>
    );
  }
}

export default Login;

希望这有效，经过试验和测试

其它你可能感兴趣的问题

上一篇React 有望在全球范围内可用下一篇为什么这不在 React 形式的 onSubmit 函数范围内？