J'essaie de faire une demande dans un fichier local, mais je ne sais pas quand j'essaie de le faire sur mon ordinateur. Me montrer une erreur. Est-il possible de récupérer un fichier dans votre projet?
// Option 1
componentDidMount() {
fetch('./movies.json')
.then(res => res.json())
.then((data) => {
console.log(data)
});
}
error: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at App.js: 10 --> .then(res => res.json())
// Option 2
componentDidMount() {
fetch('./movies.json', {
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
.then( res => res.json())
.then((data) => {
console.log(data);
});
}
error1: GET http://localhost:3000/movies.json 404 (Not Found) at App.js:15 --> fetch('./movies.json', {
error2: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at App.js: 10 --> .then(res => res.json())
// This works
componentDidMount() {
fetch('https://facebook.github.io/react-native/movies.json')
.then( res => res.json() )
.then( (data) => {
console.log(data)
})
}
Vous essayez de servir un fichier statique avec une commande fetch, ce qui implique que le fichier doit être servi par un serveur. Pour résoudre le problème, vous avez quelques options à votre disposition. Je vais décrire les deux méthodes les plus couramment suggérées:
Enfin, il existe d'autres options permettant de télécharger un ou plusieurs fichiers en ligne et de les récupérer à partir d'une URL externe. Toutefois, cette stratégie n'est peut-être pas optimale.
Votre fichier JSON doit être servi par le serveur, vous avez donc besoin du serveur express (ou de tout autre). Dans cet exemple, nous utilisons express.
Remarque: vous pouvez également télécharger git repo
Fichier App.js
import React, { Component } from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentDidMount() {
const myHeaders = new Headers({
"Content-Type": "application/json",
Accept: "application/json"
});
fetch("http://localhost:5000/movie", {
headers: myHeaders,
})
.then(response => {
console.log(response);
return response.json();
})
.then(data => {
console.log(data);
this.setState({ data });
});
}
render() {
return <div className="App">{JSON.stringify(this.state.data)}</div>;
}
}
export default App;
server.js
var express = require("express");
var data = require('./movie.json'); // your json file path
var app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get("/movie", function(req, res, next) {
res.send(data);
});
app.listen(5000, () => console.log('Example app listening on port 5000!'))
Mon approche consiste à utiliser express-generator pour configurer un serveur local rapide, puis exécutez ngrok (le niveau gratuit est suffisant) et pointez votre application sur l'URL créée. Cela présente l'avantage de vous permettre de tester facilement votre récupération dans le simulateur iOS ou l'émulateur Android, ainsi que sur un périphérique non connecté à votre ordinateur. De plus, vous pouvez également envoyer l'URL à des personnes testant votre application. Bien sûr, il leur faudrait un moyen de saisir manuellement cette URL pour que l'application puisse la définir comme point d'extrémité d'extraction.
Essayez de placer votre fichier JSON dans le dossier public comme suit:
public/movies.json
puis chercher en utilisant
fetch('./movies.json')
ou
fetch('movies.json')
J'ai déjà rencontré le même problème auparavant. Lorsque je place le fichier json dans le dossier public, le problème est résolu . Lors de l'utilisation de fetch, React lit normalement les fichiers actif/ressources du dossier public.