Je suis nouveau sur les technologies de fin de fin. Mes exigences sont de faire un post-appel sur un serveur externe. J'ai commencé avec la création de l'application réactive et utilisé Axios pour faire appel à l'appel, mais j'avais accès refusé à cause de Cors. Certains postes sur Stackoverflow ont mentionné que j'aurais besoin d'un serveur proxy pour surmonter cela. Ainsi, j'ai également ajouté une partie exprès au projet. Vous trouverez ci-dessous mes codes de réaction et express.
réagir: express: Lorsque je charge l'application réactive, je reçois l'erreur ci-dessous:
4 Réponses :
La réponse renvoyée de l'Axios Fetch est un objet, avec la charge utile dans data code>. Donc, vous devez retourner cela: componentDidMount() {
fetch("/posts")
.then(res => {
console.log(res);
return res.data; // <-- res.data instead of res;
})
.then(posts => this.setState({ posts: posts }));
}
J'ai essayé ça. Je ne reçois aucune erreur maintenant, mais les données ne sont pas rendues sur la page. Même sur la console, je peux voir un statut de réponse 200, mais je ne peux pas voir le corps de réponse. En outre, j'aimerais mentionner une chose que si vous traversez mon code de route, vous verriez que je retournerais réellement de réponse.data, donc je ne sais pas pourquoi dois-je mentionner à nouveau de résolution dans mon fichier de réact .
Ah, je vois. Oui, je suppose que je ne sais tout simplement pas quelle fonction la fonction de votre extraction. Parce qu'il "récupère" à partir de / posts / mais votre route de serveur est / . Cela pourrait-il faire partie de la question?
J'ai testé le code ci-dessous et cela a fonctionné bien. Exécuter p> NPM Installation --Save Axios Code> Avant. Il omet l'application express.js, mais peut-être que ce sera utile.
import React, {useState, useEffect} from 'react'
import ReactDOM from 'react-dom'
import Axios from 'axios'
const App = () => {
const [posts, setPosts] = useState([])
useEffect(() => {
console.log('React works')
Axios.get('http://jsonplaceholder.typicode.com/posts').then(res => {
if (res.status === 200)
setPosts(res.data)
else
console.log(res.status)
}).catch(err => console.log(err))
}, [])
const mappedPosts = posts.map(post => <p key={post.id}>{post.title}</p>)
return (
<div className="App">
{mappedPosts}
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'));
Cela signifierait que quelque chose ne va pas avec la fonction ComponentDidMount, parce que cela.state.posts.posts est vide. Je pense aussi que vous devriez utiliser retour res.data au lieu de retour res comme @christian fritz mentionné, car c'est une demande différente. Vous faites une demande dans votre application Express.js et utilisez sa propriété de données et une autre demande dans votre application de réacteur et utilisez également sa propriété de données. L'objet Demande seule contient également des informations sur le code d'état, le temps, etc.
Essayé ça. Ne fonctionne pas. Tout ce que je veux, c'est de rendre les données de ce lien: JSONPLACERMER.TyPicde.com/postss . Pouvez-vous s'il vous plaît jeter un coup d'œil à mon code et laissez-moi savoir comment faire cela.
Attends une seconde, je vais éditer ce post et poser tout ce dont vous avez besoin
J'ai besoin d'utiliser express aussi bien. Cela fonctionne bien lorsque je n'ai pas de backend express, mais j'en ai besoin pour travailler avec un backend.
Désolé, je ne sais pas express.js assez pour vous aider. Peut-être quelque chose avec Cors?
En réalité en 2020, nous n'avons pas besoin de composants de classe, de ComponendDidMount, etc. Vous pouvez faire un refactoring clairement dans votre code comme celui-ci:
import React, { useState, useEffect } from "react";
export default function App() {
const [posts, setPosts] = useState([])
useEffect(() => {
async function getPosts(){
const { data } = await fetch('/posts');
setPosts(data);
}
getPosts();
}, [])
return (
<div className="App">
<h1>Users</h1>
{posts.map(post => <p>{post}</p>}
</div>
);
}
J'ai essayé ça. Je n'ai pas d'erreur maintenant mais je ne vois pas les données rendant sur la page.
CONSOLE.LOG Vos données pour voir comment il se voit à commencer, c'est à l'esprit que la valeur n'est que ce qui devrait être affiché. Exemple: Si votre objet postal est somentrique comme: {post.message}
J'ai ajouté un journal de console avant 'SetPosts (données)'. Rien n'est enregistré sur la console.
Situé à la vue! Comme {console.log (post)}
Toujours rien. Je peux juste voir un avertissement sur la console 'Backend.js: 6./src/app.js Line 7:' getPortsts 'est défini mais jamais utilisé non-inutilisé-vars'. Rien d'autre part.
Owww j'ai oublié d'appeler, voir que je modifierai la réponse! Il suffit d'appeler Obtenir Post () après avoir créé la fonction, à l'intérieur de l'USEEFFECT, comme édité.
Maintenant, je reçois: TypeError: Impossible de lire la propriété 'carte' de non définie
Alors jetons un coup d'œil à la destruction des données, à l'intérieur de l'usureFEffect Supprimer
Maintenant, je reçois: TypeError: Posts.Map n'est pas une fonction. J'ai mis à jour comme: Const Data = Await Fetch ("/ Posts");
Oui, maintenant Totalellement Console.Log Data Avant d'obtenir la ligne d'erreur, voir quelles sont les données type que vous avez, objet ou gamme d'objets, montrez-moi ce que vous obtenez!
Je l'ai collé ici: chat.stackoverflow.com/rooms/ 205840 / ... {Message: 'Trump à nouveau iran'} donc votre sortie est quelque chose comme:
const {data} = ... et définissez sans bretelles bouclées COSNT Data et essayez la console.log. Nous sommes presque là lol
Deux choses:
1) Saisissez votre résultat de 2) Ajouter un tableau vide à l'état res.data car Fetch renvoie un objet (données, statutext, etc.) lorsqu'il résout mais que vous êtes principalement préoccupé par les données
State: {Posts: []} , puis itérer sur le tableau dans la méthode de rendu. Assurez-vous que vous ne rendant pas un objet. E.g {{post.name}} au lieu de {{post}}
Quelle est la valeur de ce
ceci.post.posts.posts . Il doit être valide réagir à l'enfant. Sinon, vous devez les convertir en enfants valides. En savoir plus objets-ne sont pas-pas-valides-AS-A-réact-enfant-if-vous-méttent-to-re-collection-de-C et Objects-Are-not-valid-as-a-react-child . Vous essayez peut-être d'afficher un objet directement qui n'est pas possible