Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.9k views
in Technique[技术] by (71.8m points)

reactjs - Unable to fetch data from local json file by axios

I am using axios library for fetching data from the local json file but when i make get request it gives me error 404 not found. Here is my file structure.

enter image description here

and i am using this code for fetching the data.

  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;

How do i solve this issue??

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

If you created this file structure using create-react-app command you have to add your json files into public folder. then change your axios path like bellow

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...