如何从react express节点组件调用外部URL？
从React Express节点组件调用外部URL可以通过以下步骤实现：
- 在React组件中引入
axios或fetch等HTTP请求库，用于发送HTTP请求。 - 在组件中定义一个函数，用于发送HTTP请求并获取外部URL的数据。可以使用
axios.get()或fetch()方法发送GET请求。 - 在组件的生命周期方法中调用上述函数，例如在
componentDidMount()中调用。 - 处理获取到的数据，可以将数据存储在组件的状态中，以便在渲染时使用。
- 在组件的渲染方法中，使用获取到的数据来展示或处理。
以下是一个示例代码：
import React, { Component } from 'react';
import axios from 'axios';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentDidMount() {
this.fetchData();
}
fetchData() {
axios.get('https://example.com/api/data')
.then(response => {
this.setState({ data: response.data });
})
.catch(error => {
console.error(error);
});
}
render() {
const { data } = this.state;
return (
<div>
{data ? (
<div>
{/* 根据获取到的数据展示内容 */}
</div>
) : (
<div>Loading...</div>
)}
</div>
);
}
}
export default MyComponent;在上述示例中，我们使用了axios库发送GET请求来获取外部URL的数据。在组件的componentDidMount()生命周期方法中调用fetchData()函数来获取数据，并将获取到的数据存储在组件的状态中。在渲染方法中，根据获取到的数据展示内容。
请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的修改和扩展。
相关·内容
1回答
编辑:更改了标题，因为我从<React.StrictMode>中删除了index.ts，现在构造函数和其中的fetch函数被调用了两次。
我正在创建一个URL Shortner服务，我被困在这样的位置上:用户使用哈希代码访问前端URL，然后重定向到原始URL。我做这个项目主要是在打字稿上。
我使用Node和Express作为我的后端，Mongo作为我的DB。它正在3001端口上运行。
我使用的反应，反应-路由器，和Redux作为我的前端。它在3000端口运行。
所以我的Routes.js文件是这样的
import React from "react";
import
浏览 3提问于2020-06-24得票数 0
我有一个简单的后端快递 const express = require("express");
const app = express();
var array = [1,2,3,4,5]
app.get("/", function(req, res){
res.send("this is backend of application");
})
app.listen(5000, ()=> console.log("listening on 5000")); 我还有一个由create- react-app创建的
浏览 24提问于2021-05-04得票数 0
2回答
如何在服务器端呈现图像和css文件？
以下是我的服务器代码：
const express = require('express')
const router = express.Router()
const ReactDOM = require('react-dom/server');
import Master from '../../../client/Master'
router.get('/', (req, res) => {
res.render('test.html', {reactO
浏览 3提问于2016-02-26得票数 17
1回答
我正在尝试让服务器渲染与异步调用一起工作。我的问题是，数据在渲染之前没有被下载。
我的代码(也可以在github：上找到)
server.js
require('babel-register');
import express from 'express';
import path from 'path';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from
浏览 3提问于2016-08-29得票数 4
我在服务器端呈现所有内容时遇到了问题，并触发了一个handleSubmit。以下是源代码：
index.js：
module.exports = require('./app/server');
app/server/index.js：
'use strict';
var env = process.env.NODE_ENV || 'development';
var express = require('express');
var http = require('http');
var app = expre
浏览 3提问于2014-10-01得票数 2
1回答
响应服务器端呈现呈现不正确的内容
、、、、
我正在开发一个使用React、Redux和Router路由器的rendering应用程序，服务器端呈现(使用express)。
我面临的问题有点难以解释。我将尝试在以下步骤解释它。
您首先从像这样的URL输入应用程序。快速服务器将发送正确的内容，其中包括正确的页面源和DOM(从铬元素面板)作为初始加载。
然后，让我们导航到另一个页面，比如 (导航并不会导致页面刷新，因为它是一个单一的页面应用程序，只有当您使用浏览器进行刷新或从浏览器地址栏中的URL输入页面时，它才会到达服务器获取SSR内容)。
使用cmd +r或刷新浏览器中的页面(您现在在页面F5上)。同样，服务器将发送内容。但这
浏览 1提问于2017-08-30得票数 1
回答已采纳
1回答
我为我的整个堆栈web应用程序实现了websocket聊天服务器，并意识到大部分源代码只为html+js提供教程，我不太确定如何从JS迁移到JSX。
我开始尝试将js代码集成到jsx组件文件中，但是遇到了express() is undefined的问题。
下面是我的JS来建立快速服务器：
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io'
浏览 0提问于2019-09-22得票数 2
我制作了这个示例应用程序来学习如何在一起使用react路由器-dom和redux，除了，我不知道如何在组件中访问道具？
所有代码都在这里，
入口文件index.js
import { render } from 'react-dom'
import React from 'react'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import App from './app'
浏览 4提问于2017-08-31得票数 1
回答已采纳
我已经在kubernetes中为前端(REACT)和后端(EXPRESS NODE JS)项目进行了文档化和创建了部署和服务。在谷歌云平台上，我已经成功地部署在同一个节点上的Kubernetes(单节点集群)中，其中包含两个Pod (即、一个POD -> REACT应用程序和第二个POD->快递节点JS)。
问题：
1.)如何在库伯奈特星系团的节点内从一个吊舱到另一个吊舱进行通信？
2.)通过在kubernetes中创建LoadBalancer类型服务，我已经将自己的REACT应用程序暴露给了外部世界，并且我能够从浏览器中访问React。现在，是否可以从节点内的REACT应用程序访
浏览 0提问于2018-11-05得票数 3
回答已采纳
我在遗留应用程序中有一个由jquery控制的选项卡式接口。
我正在将新部件迁移到ReactJS。
其中一个选项卡保存React根DOM节点，我希望在其中显示组件。当选项卡激活时，DOM节点以及选项卡中的所有内容都将通过jquery加载，其中包含html()函数。在这种情况下，React无法找到DOM节点，并出现错误。
如果我在选项卡激活中使用AJAX动态加载React脚本，那么每次加载脚本时，它都会添加一个重复的根组件。
如果只在第一次激活选项卡时加载脚本，它就无法在第二个选项卡激活之前将组件添加到DOM中。
如何处理动态插入的根DOM节点(v16.2)？
请帮帮我！
浏览 0提问于2018-03-17得票数 0
回答已采纳
我终于尝试了使用Next.js的服务器端react的世界，然而我对这个问题感到相当困惑。 我正在使用isomorphic-unfetch从pages/customer-preferences.tsx调用一个API。 CustomerPreferencesPage.getInitialProps = async () => {
const res = await fetch(API_URL + '/preference-customer');
const initialData = await res.json();
return { initialData
浏览 43提问于2020-01-24得票数 4
我正在创建一个简单的反应前端与Express后端。我可以让express将JSX数据作为JSON发送给我，这样我就可以在react中获取它并将其显示为组件吗？目前我正在发送JSON数据，并将其作为组件显示在react中，它工作得很好，如何才能将JSX数据作为JSON发送？
这是到目前为止的代码，React前端：
import React, { Component } from "react";
import "./App.css";
class App extends Component {
state = { users: [] };
compon
浏览 2提问于2017-08-11得票数 0
我试图使用react-router-dom创建多页web应用程序，但当我尝试创建用户列表页(userlist.js)时，.map()函数并不返回.map()函数中的任何内容，但是.map()行之前的最后一行工作正常，显示<h1>没有问题。
这是我的App.js：
import './App.css';
import { useEffect, useState } from "react"
import axios from 'axios';
import React from "react"
import {
Br
浏览 4提问于2022-10-02得票数 -1
在看到MERN项目允许简单的用户身份验证、快速部署等功能之后，我正在将它移到React + MongoDB Stitch中。
然而，我有一个很难理解的时间，在哪里和如何我可以调用一个网站刮擦功能。以前，我在Express.js中使用诸如：
app.post("/api/getTitleAtURL", (req, res) => {
if (req.body.url) {
request(req.body.url, function(error, response, body) {
if (!error && response.sta
浏览 0提问于2020-04-17得票数 0
回答已采纳
1回答
服务器端组件呈现
、、
我试图在服务器上使用一个非常简单的renderToString组件：
/** @jsx dom */
var React = require("react");
var Title = React.createClass({
render: function(){
return(<h1>Hello World</h1>)
}
});
module.exports = React.createFactory(Title);
当我调用ReactDOMServer.renderToString (组件)时，我得到了Error: Invar
浏览 1提问于2015-10-24得票数 2
回答已采纳
1回答
我用react和webpack来捆绑文件，然后像这样将文件链接到index.html，
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo react</title>
<link rel="shortcut icon" href="filer/DL_Logo.
浏览 0提问于2018-03-21得票数 3
回答已采纳
关于react，我有一个简短的问题。如果我有一个react容器，我可以在里面嵌套内容吗？
例如：
<div id=“mount-node”>
<p>I want this content to stay after the component mounts</p>
</div>
这个是可能的吗？如果是这样，我应该这样做吗？
浏览 0提问于2016-07-29得票数 0
1回答
我有一个容器组件，通过ajax操作符从rxjs获取数据
const data = ajax(someUrl).pipe(map(r => r.response));
在我的componentDidMount里
data.subscribe((data) => {
this.setState({ data });
});
// test.js
import React from 'react';
import { mount } from 'enzyme';
import { ajax } from 'rxjs/ajax'
im
浏览 2提问于2018-09-28得票数 2
2回答
我试着用React和我的Express后端。目前，我使用React作为我的模板语言。
我的视图是.jsx文件。
/* Express */
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const session = require('express-session');
...
/* Express application parameters */
app
.set
浏览 3提问于2017-07-23得票数 1
回答已采纳
所以我正在做一个项目，将React，Express.js+Passport和Webpack整合在一起。我理解通过react-router将所有内容推送到“主”React组件，然后让它散列出为给定路由显示的内容的概念。我认为，这在这里会很好用。坦率地说，我是一个新的反应。
我担心的是：
1)我可以/如何仍然使用Passport来验证我的路由？如果我正确理解了react-router，我会在我的快速app.js文件中有一条路由，它指向一个名为<Application/>的React组件。但是，Passport需要router.get('/myroute', isAuth
浏览 0提问于2015-06-12得票数 26
回答已采纳
1回答
只有在http请求被解决之后，我才能找出最好的方式让服务器呈现我的react组件。
例如：
组件A <-组件B <-组件C (C触发一个操作，该操作调用API并返回数据以呈现，同时只是呈现“加载”)。
当检查我的源代码时，我只看到“正在加载”，出于SEO的目的，我希望服务器等待组件C的调用解析并呈现。
从理论上讲，这听起来很简单，因为服务器应该自己调用该操作，并等待操作完成，然后调用react.renderToString()，如下所示：
server.get('/', function (req, res, next) {
showMessages({},
浏览 0提问于2015-05-17得票数 4
我正在遵循本教程- (在28点38分右)
然而，它在v4之前就出现了，而我得到了一个错误：
/Users/morganallen/Desktop/react_ssr/myapp/server/index.js:55
match({routes, location: req.url}, (error, redirect, ssrData) => {
^
TypeError: match is not a function
at fs.readFile (/Users/morganallen/Desktop/react_ssr/my
浏览 0提问于2017-11-27得票数 1
回答已采纳
我正在尝试创建一个docker容器来容纳我的前端(React)和后端(快速REST服务)，但我将后端与Webpack捆绑在一起的努力未能执行，声称“我不是一个函数”。我应该清楚，这还没有在Docker中运行。我只是想先在我的开发环境中手动执行它。 我只需简单地运行webpack，然后尝试直接运行捆绑的js (例如node./dist/server.bundle.js)。这是我的webpack.config.js： {
"name": "test-backend",
"version": "1.0.0",
浏览 54提问于2020-08-26得票数 0
可以从外部URL动态地将组件加载到绑定的react原生应用程序中吗？
我最终想要实现的示例
const id = await fetch('http://example.com/getid/');
import CustomModule from `http://example.com?id=${id}`
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<CustomMod
浏览 4提问于2018-09-19得票数 4
1回答
我通过Axios向MongoDB发送了一个表单，但它不起作用。首先，express路由器工作得很好，所以我可以向postman添加文章。但我的问题是通过Axios发送我的文章信息，控制台上除了一个问题之外什么都没有显示，这个问题是"SharedArrayBuffer使用被限制在跨源隔离站点“。
这是快速代码
const express = require('express');
const router = express.Router();
const Articles = require('../models/articles');
// Requ
浏览 4提问于2021-06-03得票数 0
我正在读的官方反应教程
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({
data: data
});
}.bind(this),
err
浏览 1提问于2015-10-18得票数 0
回答已采纳
2回答
目前，我在react组件中使用不想公开的API密钥调用API，如下所示：
useEffect(() => {
const fetchData = () => {
const url = `API_URL+${searchedValue}+process.env.API_KEY`;
fetch(url, { headers: { Accept: 'application/json' } })
.then(res => res.json()
.then((json) => {
setData(jso
浏览 5提问于2020-08-29得票数 0
我是新的反应，并试图创建一个eCommerce网站。为此，我使用了url端点来映射数据。
好吧，第二层的子类别，我能够成功地实现，但是对于第三级，我不能完美地呈现
我正在发送json回复的截图。
到目前为止，这就是我所实现的，屏幕截图。
正如您所看到的，从屏幕截图中，我能够实现顶级导航类别，甚至在它下面。但是还有一个分类子级别--例如:在“女孩”部分，有更多我无法实现的子类别。
我的代码是一样的：
topNavigation.js
import React, { Component } from 'react';
import axios from
浏览 0提问于2018-09-17得票数 1
回答已采纳
我现在使用的是React@v17.0.2和react-router-dom@v5.2.0。
我知道我能做到
import { useHistory } from 'react-router-dom'
function SomeComp (){
const history = useHistory()
function handleSomeEvent() {
history.push('....')
}
return <.../>
}
但是在发送http请求时，可能会出现类似not login或session expired
浏览 3提问于2021-05-14得票数 1
回答已采纳
2回答
我成功地将webpack开发的服务器与一个节点服务器(express)一起使用，使用webpack配置中的插件部分。
这一切都很好，但现在我尝试同构，在express应用程序中使用客户端组件。
到目前为止，我遇到的唯一问题是，如果没有webpack“解析”我的服务器端代码，我就会遇到需要组件但路径没有得到解决的情况。
也就是。
组件中的
'use strict';
import React from 'react';
import { RouteHandler, Link } from 'react-router';
import Header
浏览 4提问于2015-06-02得票数 2
回答已采纳
1回答
我正在尝试从头开始构建一个简单的react/node/express应用程序(不使用create-react- app )。我已经构建了一个简单的后端来将一些数据传递到前端，但我很难弄清楚这两者是如何通信的。如何同时运行前端和后端，并查看传入数据的前端？ 我想在一个命令中完成所有这些操作。我是否必须使用像webpack这样的工具来将所有内容捆绑到一个可运行的包中？ 我的repo可以在这里找到，它是我链接到的react-and-express分支。任何帮助都是非常感谢的！目前我正在通过启动index.js来运行应用程序，但这只是后端，我如何运行我的前端App.js并让两者进行通信？ https
浏览 39提问于2019-02-24得票数 0
我需要使用从路由器/URL的查询参数中提取的值来设置react组件的状态。
在哪种生命周期方法中，我使用这些参数设置状态？
constructor，componentDidMount，componentWillMount还是其他什么？
浏览 0提问于2018-05-19得票数 4
1回答
我有一个React，它使用React路由器和Redux作为它的状态管理器。应用程序的服务器端使用Express和Node。
我正在对外部服务进行API调用。我没有能力在外部服务上启用CORS。因此，我需要使用应用程序的服务器端对外部服务进行调用，以从等式中删除浏览器，并消除任何CORS错误。
我能够成功地从服务器端的服务中获取数据。我想知道是否可以使用某种中间件(寻找示例/资源)在客户机和服务器之间共享Redux存储。
目标：
1)处理客户端中的单击事件
2)让事件调用到外部api的服务器端路由(不知道如何做到这一点)
3)然后服务器处理此路由，发出请求，并将响应发送给客户端(通过共享的rea
浏览 4提问于2016-08-03得票数 1
回答已采纳
1回答
我试图从后端向ReactJS API发送一些简单的数据。然而，ReactJS似乎没有收到它。ReactJS只收到一个空字符串。这是两者的密码。节点在端口3000中运行，并在端口4000上作出反应。
index.js
const express = require("express")
const app = express()
const cors = require("cors")
const a = "Hello world"
// app.use(cors())
app.use(cors({
origin:"ht
浏览 1提问于2020-03-28得票数 0
回答已采纳
当用户在React JS或React Router中访问网站时，如何获取起始URL？
我想知道用户是从我用React JS v16构建的单个web应用程序的哪个页面访问的。
浏览 20提问于2018-01-24得票数 1
回答已采纳
因此，我需要将数据从express作为后端发送到react.js作为前端，我不知道我是否使用了正确的方法
所以我试图做的是，当我在mywebsite.com/home时，我从数据库中获得所有的帖子，它将是用户名和他的帖子…但我在这里得到的是，我在mywebsite.com上安装了显示来自/api的数据，并快速更改来自/s的数据
import React, { useEffect } from 'react';
import "./App.css";
import logo from './logo.svg';
import './Ap
浏览 4提问于2021-06-06得票数 0
目前，我已经将express设置为一个静态html页面，在该页面中，我的挂载到其中。我还使用了react路由器，因为我有嵌套的路由。例如：
我有一个应用程序组件(绿色大纲)。在该组件中，我呈现一个页眉组件(橙色大纲)和一个页脚组件(红色大纲)，并通过this.props.children传递一个审查组件(蓝色大纲)。
我的server.js文件(快递)：
const express = require('express');
const app = express();
app.use(express.static('dist'));
const
浏览 5提问于2016-04-16得票数 5
回答已采纳
我正在尝试使用react-router 1.0.2在react组件中执行重定向。
在我的主app.js中，我创建了一个散列历史：
import createHashHistory from 'history/lib/createHashHistory';
const history = createHashHistory();
...
ReactDOM.render(
<RelayRouter history={history} routes={routes} />,
document.getElementById('root')
)
浏览 0提问于2015-12-23得票数 3
回答已采纳
我有一个简单的jquery ajax，可以从API中获取内联HTML代码
$.ajax({
url: url,
headers: { 'Accept': 'application/javascript' },
dataType: 'html',
beforeSend: function(){
$('.load-more').slideDownThenFadeIn(100);
}
})
.done(function(data) {
$('#container').appen
浏览 0提问于2017-09-25得票数 1
我是个新手，需要一些帮助。我正在使用Axios从REST API获取数据。我有两个组件。父组件和子组件。在父组件中，我从具有多个记录的API中获取汇总数据，而子组件用于在用户单击父组件中的特定记录时进行另一个API调用，以获取记录的详细信息。父组件有3个属性( Document-Number、document-Type和Approver )。当用户点击按钮时，我需要将"Doc-Number“和”Doc-Type“值传递给子组件接口URl。
注意:我在父API响应中没有任何专用的ID属性，这就是我使用index作为键的原因。
这是我的父组件
import React, { Compone
浏览 0提问于2020-10-16得票数 1
我正在使用MERN堆栈构建一个应用程序，并使用Passport-local进行身份验证，在后端使用express路由器，在前端使用React路由器。React在端口3000上运行，而express在端口5000上运行。我使用CORS和localhost:5000作为react的package.json的代理服务器。
在localhost:3000/login的登录页面中，一旦用户提交信息并单击submit，我就会在后端收到请求，并通过passport进行身份验证，没有任何错误。
但是，我不能将用户重定向到localhost:3000/dashboard。
如何将用户重定向到React中与Exp
浏览 7提问于2021-02-05得票数 2
2回答
我正在构建一个使用真实层开放银行API的web应用程序。该应用程序有一个使用React路由器的react前端，以及一个Express和Nodejs后端。目前，我正在使用react build脚本来提供静态文件：
const app = express();
app.use(cors());
app.use(express.json());
app.use(express.static('../client/build'));
app.get('*', (req, res) => {
res.sendFile('index.html
浏览 0提问于2019-11-04得票数 3
我正在构建React + Express应用程序，我需要将一些配置变量从服务器配置传递到React应用程序中(例如，API URL)。
我需要这样做在开发(2台服务器- Webpack开发服务器+ Node.js)，也在生产(只有Node.js快速服务器与内置前端)。
如何做到这一点？
我尝试将本地变量从Express传递到我的模板，在那里我做了window.config = '<%- JSON.stringify(config) %>' (EJS模板系统)，然后在React App中使用了window.config。我不认为这是正确的做法。
浏览 4提问于2019-08-09得票数 3
1回答
import React from 'react';
const App = () => {
console.log('app render');
return (
<div>
<Children />
</div>
);
};
const Children = () => {
const [update, setUpdate] = React.useState(false);
console.log('children render');
浏览 3提问于2022-06-05得票数 0
2回答
我正在尝试调试react express应用程序的后端。我用webpack来捆绑。
如何在WebStorm上编辑配置，以便我可以同时调试前端和后端？我用的是2016年WebStorm。
浏览 0提问于2017-01-19得票数 1
回答已采纳
2回答
我应该忽略“React有一个缺失的依赖”警告吗？通常，当我从API中获取数据时，我会这样做：
const Component = () => {
const [data,setData] = useState([]);
const getData = () => {
//Getting data and set data code...
}
useEffect(()=>{
getData();
},[]);
}
最近，我正在尝试使用redux来做同样的事情(从API获取数据)，我得到了这样的警告:React有一个缺失的依赖项.
行动：
i
浏览 2提问于2020-04-18得票数 0
回答已采纳
我有反应SSR的问题。我使用反应性路由器作为我的应用程序路由管理器。
在服务器端，它可能如下所示(server.js)：
var app = express();
app.get("*",function(req, res ){
match({routes:AppRoutes, location:req.url},
function(err, redirectLocation, renderProps){
if (error) {
res.send(500, error.message)
} else
浏览 1提问于2017-02-20得票数 1
回答已采纳
我正在开发一个使用react和express.js的同构应用程序。我正在使用React路由器进行客户端路由。在运行应用程序时，我在控制台中得到以下错误和警告
警告：失败的propType:向Route提供的object类型的无效支柱handler，预期的function。
警告：向UnknownComponent提供的object类型的未定义的无效handler，预期function。
TypeError: type.toUpperCase不是函数
以下是components/main.jsx的代码
var React = require('react');
var Count
浏览 3提问于2015-07-25得票数 1
我在使用React和Express构建网站时遇到了https重定向问题。基本上，虽然我已经在其他网站上设置了完全相同的重定向(有服务器端渲染)，在那里一切都很好。在这里我不能让它工作。
Express代码片段：
const express = require('express')
const nodemailer = require("nodemailer");
const path = require('path')
const app = express()
const helmet = require('helmet')
r
浏览 19提问于2020-05-14得票数 0
1回答
我试图通过reactjs应用程序通过node.js和express打开用户提供的URL。
我正在使用material-ui和axios。请查找下面的UI代码。
实际上是一个用于UX测试项目的POC，其中给出了要测试的应用程序的URL，并且该应用程序将在用于测试的父(主)应用程序中打开。
UrlForm.js
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles'
浏览 0提问于2019-04-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
