如何将数据发布到我的 React 应用程序中？答案

【问题标题】：How to post data into my React application?如何将数据发布到我的 React 应用程序中？
【发布时间】：2021-03-17 13:01:19
【问题描述】：

我的反应有问题，我正在使用 MERN 模板，但我无法使我的帖子正常工作，我希望能够在我的网站上添加一个新博客。当我添加一个新博客时，我似乎在我的 console.log 中得到了它。（标题和描述）但不在我的应用程序上，我相信这是我获取的东西。

这是我的 app.js 文件

import React, {useEffect, useState} from 'react';
import {Router} from "@reach/router";
import Blogs from "./Blogs";
import Blog from "./Blog"; 

const API_URL = process.env.REACT_APP_API;

function App() {
  const [blog, setBlogs] = useState([]);
  const [postCount, setPostCount] = useState(0);


  
  useEffect(() => {
    async function getData() {
      const url = `${API_URL}/blogs`;
      const response = await fetch(url);
      const data = await response.json();
      setBlogs(data);
    }
    getData();
  }, [postCount]); 

  function getBlog(id) {
    const blogObject = blog.find(data => data._id === id);
    return blogObject;
  }


  //callback så min addBlog ved hvor den skal hente data fra
  async function addBlog(title, description, date) {
    console.log("title", title);
    console.log("Description" , description);

    const newBlog = {
      title: title,
      description: description,
      date: date
    }   

    const url = `${API_URL}/blogs`;
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json'
     },
      body: JSON.stringify(newBlog),
    });
    const data = await response.json();
    //setBlogs([...blogs, newBlog]);
    setPostCount(postCount + 1); //call my post count that fecths my data automatic 
    console.log("blog", data);
  }
  
  return (
    <>
      <h1>Blog App!</h1>
     <Router>
       <Blogs path="/" blogs={blog} addBlog={addBlog}>{blog.id}</Blogs>
       <Blog path="/blogs/:id" getBlog={getBlog}></Blog>
     </Router>
    
    </>
  );
}

export default App;

这是我的 addBlog.js

import React, { useState } from 'react';

function AddBlog(props) {
    //state const for hver properties i din object(question)
    const [title, setTitle] = useState("");
    const [description, setDescription] = useState("");
    const [date, setDate] = useState("");

  

    return (
        <><label>Title: </label>
            <input type="text" placeholder="Write the title of your Blog" size="30" onChange={(event) => {
                setTitle(event.target.value)
            }
            } /><br /><label>Description: </label>
            <input type="text" placeholder="Write the description..." size="30" onChange={(event) => {
                setDescription(event.target.value)
            }} />
           
            <br />
            <button onClick={(event) => props.addBlog(title, description, date)}>Add Question</button>
  

        </>
    );

}

export default AddBlog;

希望有人能帮帮我。

更新这是我控制台的屏幕转储 - 当我按添加博客时，它显示 POST 401 unAuthrorized。

抱歉，我发布的图片是错误的项目，但现在是正确的项目

Screendump of my console

【问题讨论】：

您确定您的 blogPost 正在保存吗？乍一看，这段代码似乎很好。您应该尝试在反应应用程序之外调用获取帖子的端点，以检查它是否正在返回新帖子
你能检查浏览器控制台/网络选项卡中是否有任何错误吗？可能是 CORS 问题
@AndrzejT 我添加了一个屏幕转储
@MaCadiz 我试图在反应之外调用它（我相信）并且它有效

标签： reactjs post postman mern

【解决方案1】：

查看您的日志后，我认为您需要在获取请求的同时发送授权标头，以便后端响应。

您可以像这样添加授权标头 - 但是，您需要找出/生成您的后端可以接受的授权令牌。还有一点改进，我会通过允许它接受 URL 来使函数更加动态。

   useEffect(() => {
    async function getData(url) {
      const response = await fetch(URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': <your auth token>
        }
      });
      const data = await response.json();
      setBlogs(data);
    }
    getData(`${API_URL}/blogs`);
  }, [postCount]);

【讨论】：