使用 express 和 axios 反应应用程序在呈现数据时出错

Posted 2023-02-22

【中文标题】使用 express 和 axios 反应应用程序在呈现数据时出错

【英文标题】：React app with express and axios gives error on rendering the data

【发布时间】：2020-04-29 13:47:38

【问题描述】：

我是前端技术的新手。我的要求是对外部服务器进行后期调用。我开始创建 react 应用程序并使用 axios 进行调用，但由于 CORS，我被拒绝访问。 *** 上的一些帖子提到我需要一个代理服务器来克服这个问题。因此，我也在项目中添加了一个快速部分。下面是我的反应和表达代码。

反应：

import React,  Component  from "react";

class App extends Component 
state =  posts: null ;

componentDidMount() 
fetch("/posts")
  .then(res => 
    console.log(res);
    return res;
  )
  .then(posts => this.setState( posts: posts ));


render() 
return (
  <div className="App">
    <h1>Users</h1>
    this.state.posts
  </div>
);



export default App;

快递：

var express = require("express");
var router = express.Router();
const axios = require("axios");

router.get("/", function(req, res, next) 
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then(response => res.json(response.data))
.catch(err => next(err));
);

module.exports = router;

当我加载 React 应用程序时，我收到以下错误：

Error: Objects are not valid as a React child (found: [object Response]). If you meant to render a collection of children, use an array instead.

【问题讨论】：

这个this.state.posts 的值是多少。它需要是有效的 React 孩子。如果不是，您需要将它们转换为有效的孩子。阅读更多 objects-are-not-valid-as-a-react-child-if-you-meant-to-render-a-collection-of-c 和 objects-are-not-valid-as-a-react-child。您可能试图直接显示一个不可能的对象

【参考方案1】：

axios fetch 返回的响应是一个对象，payload 在data。所以你需要返回：

componentDidMount() 
  fetch("/posts")
    .then(res => 
      console.log(res);
      return res.data;  // <-- res.data instead of res;
    )
    .then(posts => this.setState( posts: posts ));

【讨论】：

我试过这个。我现在没有收到任何错误，但数据没有在页面上呈现。即使在控制台上，我也可以看到响应状态 200 ，但看不到响应正文。另外，我想提一件事，如果你通过我的路由代码，你会看到我实际上正在返回 response.data，所以我不确定为什么我需要在我的 react 文件中再次提及 res.data .

啊，我明白了。是的，我想我只是不知道你的 fetch 函数是做什么的。因为它从/posts/“获取”，但您的服务器路由是/。这可能是问题的一部分吗？

【参考方案2】：

我测试了下面的代码，它运行良好。之前运行npm install --save axios。它省略了 express.js 应用程序，但也许会有所帮助。

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

【讨论】：

这意味着 ComponentDidMount 函数有问题，因为 this.state.posts 是空的。我也认为你应该使用return res.data 而不是return res 就像@Christian Fritz 提到的那样，因为这是一个不同的请求。您在您的 express.js 应用程序中发出一个请求并使用它的数据属性和您的反应应用程序中的另一个请求，并且还使用它的数据属性。单独的请求对象还包含有关状态码、时间等的信息

试过了。不工作。我想要的只是从这个链接呈现数据：jsonplaceholder.typicode.com/posts。你能看看我的代码，让我知道怎么做吗？

等一下，我会编辑这篇文章，把你需要的东西放在那里

我也需要使用 express。当我没有 express 后端时它工作正常，但我需要它与后端一起工作。

对不起，我对 express.js 的了解不够，无法帮助您。也许与CORS有关？

【参考方案3】：

实际上在 2020 年我们不再需要类组件、componendDidMount 等...您可以像这样在代码中进行清晰的重构：

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

【讨论】：

我试过这个。我现在没有收到错误，但我没有看到页面上呈现的数据。

console.log 您的数据以查看它的运行情况，请记住该值只是应该显示的值。示例：如果您的帖子对象类似于：message: 'trump agains iran'，那么您的输出类似于：<p>post.message</p>

我在“setPosts(data)”之前添加了一个控制台日志。控制台上没有记录任何内容。

设置在视图中！喜欢<p>console.log(post)</p>

还是什么都没有。我只能在控制台“backend.js:6 ./src/App.js 第 7 行：'getPosts' 已定义但从未使用 no-unused-vars”上看到警告。除此之外没有什么。

【参考方案4】：

两件事：

1) 从res.data 获取您的结果，因为 fetch 在解析时返回一个对象（数据、statusText 等），但您最关心的是data

2) 向状态state : posts : [] 添加一个空数组，然后在render 方法中迭代该数组。确保您没有渲染对象。例如post.name 而不仅仅是 post