使用react在提交时附加加载组件
在使用React时，可以通过附加加载组件来实现在提交表单时加载附加组件的功能。附加加载组件是指在表单提交过程中显示一个加载提示，以增强用户体验。
具体实现方式如下：
- 在React组件中，可以使用state来控制加载组件的显示与隐藏。可以定义一个布尔类型的state变量，命名为
isLoading，初始值为false。 - 在表单的
onSubmit事件处理程序中，首先将isLoading设置为true，表示正在加载。 - 在加载组件中，可以使用条件渲染（Conditional Rendering）的方式来显示加载提示。可以使用
isLoading的值来决定加载组件是否显示。如果isLoading为true，则显示加载组件；如果isLoading为false，则隐藏加载组件。 - 当表单提交完成后，可以在提交成功或失败的回调函数中将
isLoading设置为false，表示加载完成。
这样，当用户提交表单时，加载组件会显示出来，提供给用户一个反馈，告知正在处理中。等到处理完成后，加载组件会自动隐藏。
React中常用的附加加载组件有很多，下面是一些常见的组件推荐：
- React Loading：一个简单易用的加载组件，支持自定义颜色、类型和大小。
- React Spinners：一套漂亮的加载动画组件库，提供多种样式和效果的加载动画。
- React Loading Overlay：一个可自定义的全屏加载组件，支持自定义加载文本和样式。
通过使用上述组件，可以实现在提交表单时附加加载组件的功能，提升用户体验。
请注意，以上推荐的组件只是其中的几个例子，实际使用时可以根据需求选择适合的加载组件。
相关·内容
当成功提交表单时，我正在尝试呈现其他组件。表单有不同的rails布局，在表单提交后，它会使用不同的布局进行重定向。
使用react-router和重定向对象来渲染组件，但是如何使用布局来渲染它呢？此外，我想显示闪光信息后，表单提交与反应。因此，如果在提交表单后重新加载页面，则无法在react组件中设置flash消息。有什么建议吗？
谢谢。
浏览 0提问于2018-05-09得票数 3
为了让我了解React.js，我正在开发一个简单的留言板应用程序，它同时呈现客户端和服务器端的视图。不幸的是，我遇到了一个障碍。
文件components/index.jsx当前如下所示：
var React = require('react');
var Notice = React.createClass({
render: function () {
return (
<div className="noticeitem">
{this.props.text}
</div&
浏览 0提问于2015-07-20得票数 0
回答已采纳
1回答
我是个新手，我得到了以下错误：
react-dom.development.js:14906 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might
浏览 1提问于2021-04-29得票数 0
我有一个表单，当我输入数据并提交它时，我将数据发送到reducer，然后将其保存到SQL数据库中。数据库返回给我输入的数据加上一个ID，我将其存储在我的存储中。 现在我有了另一个React-Select组件，我希望它将输入的数据显示为DefaultValue。 我正在寻找一种方法，使React选择组件在从useSelector挂钩返回真值时重新加载，并且最好是在该值发生更改时重新加载。 import React, { useEffect } from 'react';
import Select from 'react-select';
import { us
浏览 23提问于2021-03-18得票数 0
1回答
我使用Vuejs1.0和Laravel5.2作为我的一个应用程序的技术栈。我有一些大的表单，其中涉及到一些基于vue组件的元素，如数据启动器和签名垫，它可以在同一表单上出现多次。
我面临的问题是，有时所有组件都没有呈现，当提交这些半加载的表单时，它会引发其他问题。因此，我正在寻找一个选项，通过这个选项，我可以启用提交按钮，只有当页面上的所有组件已经加载，如果有任何组件在加载中有问题，我可以指示用户重新加载通过警报弹出或其他。
浏览 5提问于2022-09-23得票数 0
我正在用React框架创建spfx webpart。我有一个渲染方法，所有的控件都被渲染了。我有一个按钮，在DOM中的几个复选框将发送数据到SharePoint使用post方法this.context.spHttpClient.post当用户点击按钮时。我可以将数据提交给SharePoint。但是，一旦我提交了数据，我就不能重新加载spfx But部件。我必须在不重新加载页面的情况下重新加载web部件。我已尝试再次调用render方法。当然，它可能不是正确的方式，所以它不起作用。
浏览 0提问于2017-11-30得票数 1
我正在计划一个简单的CRUD/reports应用程序，具有以下特性：
第一次加载页面数据后，不需要动态更新其数据。
每个页面/表单/报表/其他任何地方都有单独的URL路由(例如，不需要弹出表单，一旦提交就会更新页面)
不需要乐观的更新
不需要数据缓存客户端
我在这里试图实现的是完全消除客户端与服务器对话的编程。为了实现这一点，我想使用以下堆栈：
PostgreSQL及其角色系统用于管理多用户应用程序中的身份验证
Postgraphql作为客户端与数据库对话的单一API端点。
GraphQL语言，用于在呈现特定URL路由之前一次获取所有数据。
在单页应用程
浏览 1提问于2016-07-12得票数 1
我有一个React组件: stepA，它在提交时获取一个值，然后将该值作为state.chef_positions.[0].chef_title_id存储在我的redux存储中。
在用户提交StepA后，他们会立即被定向到StepB。在stepA的reducer完成之前，StepB正在挂载，这意味着StepB从存储中加载了不正确的值。
当stepA用户操作已保存到服务器/存储时，让stepB重新呈现的正确方法是什么，以便重新呈现它的调度已完成？
class stepA extends React.Component {
handleSubmit(data) {
this.prop
浏览 0提问于2017-06-07得票数 3
我正在处理一个现有的应用程序。我在React Js中写了一些它的视图。现在，我想使用jquery load将这些视图加载到其他页面中。有没有可能。
假设leave.html包含react代码。现在，我想使用jquery load在index.html中加载leave.html。index.html没有react代码。如何完成此操作
浏览 2提问于2017-03-06得票数 1
加载器组件： import React, { Component } from "react";
export class Loader extends Component {
state = {
isLoading: true,
};
componentDidMount() {
setTimeout(() => {
this.setState({ isLoading: false });
}, 500);
}
render() {
return (
<span className=
浏览 11提问于2020-09-09得票数 0
1回答
我在rails 5.0中使用
重要的宝石是
gem 'rails', '~> 5.0.2'
gem 'react-rails'
gem 'react-router-rails'
gem 'slim-rails'
我的布局和页面模板都很苗条，我到处都在用咖啡。
当我使用react路由器时，我面临着很多问题。
问题清单如下：
我想得到一个干净的方法，如角度，我可以使用模块+控制器+视图的反应。有可能吗？
现在我使用的是react路由器，但问题是，当它向服务器发送请求时，请求就会出现在我的动作控制器、操作
浏览 4提问于2017-03-25得票数 0
2回答
这是我的反应元件
import React, { Component } from 'react';
import categories from './categories.json'
import './content.css'
export default class Content extends Component {
constructor(props) {
super(props)
this.state = {
searchText: '',
浏览 4提问于2017-12-16得票数 0
回答已采纳
2回答
我从传统的HTML转移到反应。
我的经典HTML有外部JavaScript，它甚至将侦听器附加到$(document).ready()上。这不再起作用了，因为$(document).ready()是在React呈现元素之前触发的。
为了将偶数侦听器附加到React页面，我尝试按下面的方式使用componentDidMount()，但是偶数侦听器没有被附加。
reactJS.js：
var React = require('react');
var ReactDOM = require('react-dom');
class Question extends
浏览 2提问于2017-11-27得票数 1
回答已采纳
我试图在验证表单时显示警告。问题是，在验证过程中发生错误时，我希望显示父组件中定义的警报--这会导致submiting /重新加载表单，而e.preventDefault()不足以停止子处理。我已经发现，setState通过道具会导致提交，但我不知道如何通过setState来阻止提交。这个案子我能做什么？我认为Router有一些共同之处，因为这种机制不需要使用路由。下面是一些代码：
App.js (父组件)
import React, { Fragment, Component } from "react";
import { BrowserRouter as Router,
浏览 1提问于2021-05-06得票数 2
回答已采纳
1回答
我是新来的反应。我的任务是：
将来可以对多个checkboxes.Checkboxes名称进行显示。(客户端可以决定在顶部显示哪个复选框值，以此类推)。将根据订单编号显示复选框。下面将有一个提交按钮，将在加载时禁用该复选框。强制用户勾选所有复选框，这时按钮才会启用。在单击“保存”按钮时，将数据发送到后端。(暂时我将登录到控制台).
我用的是反应打字本。
我附上了一张快照作为参考。
到目前为止，我已经做了以下工作：
import React, { useState } from "react";
interface Data {
name: string;
order
浏览 1提问于2022-05-19得票数 1
回答已采纳
我有一个类似这样的组件：
import React, { PropTypes, Component } from 'react'
class MyView extends Component {
componentDidMount() {
window.addEventListener('onbeforeunload', this.saveState())
}
componentWillUnmount() {
window.removeEventListener('beforeunload&
浏览 0提问于2016-08-22得票数 5
我有一个简单的React应用程序，并使用React-Router在成功提交表单时重定向到感谢组件。这很有效，但当用户单击浏览器的后退按钮或刷新时，它会保持加载感谢组件，但会删除路由。我确实在应用程序状态下有一个名为‘formSubmitted’的变量，当表单提交并显示时，它将更改为true，并关闭感谢组件的主要主页组件。因此，我猜在单击或刷新后退按钮时保持为真。任何帮助都将不胜感激！ 我曾尝试在IF语句中使用PerformanceNavigation.type == 2或1来检查单击，然后将setState of formSubmitted重新设置为false，但未起作用。 Router.j
浏览 7提问于2019-09-06得票数 0
回答已采纳
AFAIK，在React函数组件中，必须使用useEffect实现componentWillUnmount功能，如下所示：
useEffect(()=>{
return console.log("component unmounting");
},[])
我正在创建一个表单页面，并希望在用户退出该页面时提交进度。所以我在考虑在清理内部提交。
但是，如果我不将formData状态放入依赖数组中，那么在清理过程中状态就会失效。
如果我将formData放入依赖数组中，每次formData发生变化时，清理都会运行。
如何保持状态新鲜，但只在“真正的卸载”中运行清理？
con
浏览 0提问于2021-01-22得票数 4
回答已采纳
，这是我的Router.js文件。我正在尝试测试图像是否成功加载。但是只有URL被显示，而不是图像。
import ronaldo from './assets/images/ronaldo.jpg'
import messi from './assets/images/messi.jpg'
import Navigation from './Components/Navigation';
class Router extends Component {
state
浏览 5提问于2020-05-28得票数 0
1回答
是否可以在没有提交按钮的情况下提交表单？例如，在组件卸载时提交表单，这样用户就不需要单击按钮来保存。想想这样的事情：
import React from "react";
import { Formik, Form, Field } from "formik";
const Example = () => {
useEffect(() => {
return () => {
//trigger Submit or send Request with Form Values from here
};
}, [
浏览 3提问于2020-08-10得票数 3
回答已采纳
1回答
反应功能触发重装？
、、、
因此，我有一个父函数getData()，它将从本地服务器请求数据。我把函数传递给我的提交表格。我在提交表单时调用该函数。它会被调用，但是我的表单状态会被自动重置。为什么会发生这种情况？还有一种方法可以重构我的表单useState，我想我使用的useState太多了。谢谢你之前。
这是我的表格
const AddForm = ({ getData, classes }) => {
console.log("Rendering AddFORM");
const [checkboxes, setChecked] = React.useState([]);
const
浏览 1提问于2021-04-12得票数 1
回答已采纳
1回答
我正在使用react、alt.js和react路由器，并使用基本CRUD构建应用程序。有一个用于"Create“的菜单项，它会弹出一个模式(使用react bootstrap.)在提交时，它会触发一个操作，在后端创建某个模型，然后执行一个browserHistory.push (正如react路由器文档中所建议的那样)，当这个操作完成后，转到新创建的项目的item页面。
所以在基本情况下，这是可行的。例如，如果我在主应用程序页面上，它就能工作。但是，如果我已经在另一个项的item detail页面上(假设我在/item/1上，我刚刚创建了/item/2，所以我尝试从页面/item/1重
浏览 5提问于2016-06-30得票数 3
回答已采纳
我在Wicket和datepicker有一个小问题。
我有一个jquery datepicker，在页面加载时，我将它包含在wicket页面中。它正在显示日期选择器，当我单击提交按钮时，日期选择器是禁用的(甚至不显示calendar.gif)。
浏览 0提问于2011-11-08得票数 0
2回答
用调度位置更改上的剩余动作
、、、、
我正在使用React和Redux作为搜索应用程序。使用react-router-dom，我将/search/:term?路由到Search组件：
<Router>
<Switch>
<Route exact path="/search/:term?" component={Search} />
<Redirect to="/search" />
</Switch>
const Search = (props) => {
const { term } = props.m
浏览 0提问于2018-05-17得票数 1
回答已采纳
我有一个使用react js的仪表板面板，我在其中使用了react-grid-layout；我在我的内容中使用了react-grid-layout，它工作正常，但当我关闭右侧或左侧面板(抽屉)时，作为react-grid-layout父级的内容的宽度会修改，但在此更改之后，我的列的宽度并没有根据它们的父级的宽度大小进行修改；我如何重新加载我的ResponsiveGridLayout组件来更改孩子(列)的宽度？这是在这个问题中显示我的问题的简单代码：example 这是我的仪表板图像： ?
浏览 100提问于2021-01-03得票数 2
2回答
子组件永远不应该在React中有状态吗？我理解状态应该由“包装器容器”或父容器来维护，并且它应该具有单向流。我已经开始使用React，并且有一个包含多达10个子组件的头容器。
假设其中一个子组件是一个带有提交按钮的表单，可以启用或禁用该按钮。
这个子组件应该不能有一个为按钮初始化状态的构造函数，并能够直接操作它，或者我在包装器容器中“只”维护如此微小的状态是否很重要？
浏览 1提问于2016-12-02得票数 2
1回答
基于本文：，我试图在react中创建一个自定义游标组件
我使用的是，问题是悬停事件只在初始页面加载时或刷新页面后处理路由器组件中的内容。
然而，悬停总是在nav组件链接上工作。我已经设置了一个基本的CodeSandbox，在这里您可以看到nav链接上的悬停是如何工作的，而不是在页面内容链接上(在初始页面加载之后和在页面之间导航时)。
我是一个反应的初学者，所以我肯定我做错了这件事。有人能帮忙吗？
浏览 1提问于2020-08-22得票数 0
回答已采纳
所以我在react-router-dom中使用redirect，我有两个页面，home和create当create中的表单完成并提交后，它将执行<Redirect>函数，它可以工作，但ComponentDidMount没有再次触发，我需要重新加载页面以使ComponentDidMount重新启动，这是我的代码 下面是我在Create文件中使用redirect的方法： if(this.state.createNew){
return <Redirect to='/home'/>
} 这是我的Home文件中的ComponentDid
浏览 126提问于2020-06-10得票数 0
当我从子组件提交表单时，如何更新定义了父contex api的类的状态？
import React, {createContext,Component} from 'react'
import http from './services/httpService'
import {MyApiUrl} from './services/httpService'
export const GlobalState = createContext()
export class DataProvider extends Component{
浏览 4提问于2021-11-03得票数 0
我使用，在简单表单上使用客户端验证。
该表单是在页面加载时提交的，并显示如下错误：
我希望防止在页面加载时提交表单，并且只在用户单击Submit按钮时显示错误。
下面是使用reduxForm的表单组件：
import React from 'react'
import { Field, reduxForm } from 'redux-form'
const renderField = ({ input, label, type, meta: { touched, error, warning } }) => {
console.lo
浏览 4提问于2018-12-26得票数 3
我的术语在这里可能是错的，但是当您没有一个完整的React应用程序时，除了一个“小部件”之外，我不知道如何称呼它，而是在一个其他静态的root页面上附加一些小的React片段到不同的HTML上。但是，这就是我要做的：
const StripeForm = React.lazy(() => import('./Stripeform'));
// ...
const formPlaceholder = document.getElementById('cwr-stripe-form');
const formRoot = createRoot(formPlac
浏览 2提问于2022-07-09得票数 0
回答已采纳
在JQuery中，您可以使用$(document).on("event-name", "selector-name", callback() )来处理DOM中已经存在的元素以及在页面加载之后动态插入的元素上的事件(例如。从服务器端创建的元素)
不过，我的问题是，考虑到React使用虚拟DOM的事实，我们如何实现对ReactJS中动态插入的元素的事件处理。
非常感谢您的帮助
浏览 2提问于2019-11-22得票数 0
我一直在尝试用event.preventDefault()将值从一个带有Redux-Form的表单传递到它的handleSubmit，这样提交这个表单就不会改变URL。
这很可能与react-router有关。
以下是我尝试的摘录。
//form
class SampleForm extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<for
浏览 0提问于2017-11-12得票数 0
1回答
我正在创建带有ApexCharts的图形。我对这两者都不熟悉，所以这可能是显而易见的:当我第一次加载webste或重新加载它时，我的图形不会呈现。但是，当我在UseEffect中更改某些内容时，它确实会呈现。
编辑:认为这可能与异步Axios调用有关。组件在调用之前呈现。知道我如何在不从axios中删除异步(这会破坏它)的情况下延迟它吗？
我的App.js：
import './App.css';
import React, { useEffect } from 'react';
import axios from 'axios'
import
浏览 7提问于2022-03-23得票数 0
回答已采纳
2回答
我正在尝试通过动作创建器向reducer提交表单数据，但它无法工作的anyway.The页面正在重新加载。我无法抗拒。
下面是我的代码
import React, { Component } from 'react';
import { connect } from 'react-redux'
import {addName} from '../Actions/actionCreators'
class about extends Component {
constructor(props){
super(props)
浏览 5提问于2019-08-02得票数 0
1回答
我正面临一个使用React和Django的不同寻常的用例。我的流程从用户系统上运行的应用程序向我的Django服务器发起的POST请求开始(响应显示在浏览器上)。POST请求包含验证用户身份所需的数据。通过身份验证后，服务器将返回一个为该用户定制的简单HTML页面，包括验证后续请求(如表单提交)所需的详细信息。现在我需要用一个react应用程序替换这个简单的HTML页面。问题是，当从服务器返回react应用程序时，我如何将用户特定的信息嵌入到react应用程序中，这样一旦应用程序加载到浏览器上，我就不必再次要求用户提供身份验证信息。在使用react时，这是可能的吗？
浏览 12提问于2020-04-13得票数 1
3回答
上下文：--我想创建一个允许用户填写表单并提交它的模式。在POST请求完成后，模式应该关闭。有多个模式具有相似的行为，但形式不同的内容，所以我需要使它可重用。表单中的数据不在前端应用程序的其他地方使用，只存储在后端。
相关技术栈： react，redux，react redux，redux-saga，无SSR
选项1:在redux中存储模式和请求状态
开启和提交模式将触发以下一系列事件：
开启模态的调度动作
用数据提交表单的发送操作
发送POST请求提交表单，将redux加载状态设置为true
如果成功，将redux加载状态设置为false，将“模式打开”状态设置为false。
浏览 10提问于2020-06-06得票数 1
回答已采纳
我已经开始使用Flux和react-router开发一个应用程序。我的一个组件使用从Flux存储中获得的状态进行填充。这可以很好地工作。但是，当我使用react-router离开这个组件，然后再次返回时，我得到了上面的错误。如果我刷新页面，错误就会消失，页面工作正常。
根据我对此的理解，react-router似乎没有重新挂载此组件，因此它试图更改未挂载组件的状态，因此出现了错误。
如果这是正确的，我如何让react-router重新挂载组件？
PS。这个问题的代码太长了，不能在这里发布它是在Github上发布的，但是因为这个问题已经解决了，所以这个帖子已经被删除了。更新(谢谢Sean)：
该
浏览 0提问于2015-03-13得票数 1
1回答
在浏览React.Fragment时，我在VisualStudio代码上遇到了一条奇怪的Intellisense消息：
注意:无法调用外来组件。
在研究过程中，我发现了一些与“外生成分”有关的东西，但没有关于它的实际意义的提示。
有人能解释一下为什么会发生这种情况吗? ExoticComponent是什么？
这是一段代码，消息在眨眼之间出现：
// ...
render () {
return (
<RandomComponent
tabs={[
{
lab
浏览 1提问于2019-05-02得票数 7
回答已采纳
我正在编写一个小型应用程序，该应用程序使用AWS无服务器架构和反应本地世博会前端。
这个问题在本质上有点抽象，因为我不需要一个具体的答案，而是在实现和架构上朝着正确的方向前进。
我设计了一个应用程序，通过API (通过认知授权)将一个图像发送到AWS S3，当图像在s3中降落时，一个后端进程被触发，旋转AWSt提取，一旦成功的SNS主题更新第二个lambda来处理图像中的文本，在第二个桶中登陆最终结果--所有这一切都很好，我可以通过Postman手动命中这个桶，一切都很愉快！
当集成前端时，在React本机应用程序中，我拍摄了一张图片，在保存时，我可以调用API端点来上传图像(再次很好)，只是
浏览 4提问于2021-08-16得票数 2
2回答
我正在制作一个web应用程序，用户在图像中的对象周围绘制包围框。
如何使用React的本地状态：当用户仍在绘图时(即在mouseUp之前的mouseMove中)，我存储矩形的属性。
如何使用Redux的全局存储：一旦mouseUp触发，绘图就结束了，并且不再对矩形进行更新。我想要将这个矩形“提交”到Redux。
这是处理状态管理的正确和/或规范的方式吗？
我还希望将React和Redux状态(即当前正在绘制的矩形以及已经在中“提交”的矩形)传递给子组件。
在react-redux的mapStateToProps中，这是可能的吗?在mapStateToProps中，我似乎找不到将
浏览 1提问于2017-11-18得票数 7
回答已采纳
最近几天我一直在努力消除页面闪存。我的项目从创建-反应-应用程序开始，然后我使用来设置SSR和其他各种选项。当我开始遇到问题时，我剥离了我的代码并弹出。 --你可以用npm run build构建，用npm run serve启动SSR。访问http://localhost:3000/查看结果。
我的应用程序中有两条路线：Home和About。
前往/ (Home)按需要工作：react-loadable标识home包，为其注入<script>标记，并将页面发送到门外。客户端加载所有的包并在没有闪存的情况下做出反应。
转到/about会产生页面闪存(确保从服务器加载页面以查看此结果
浏览 1提问于2018-10-19得票数 0
回答已采纳
1回答
我刚开始使用React和React Router。
主页(主页组件)通过ajax请求将数据加载到显示数据的服务器。
然后，人们可以使用react路由器在应用程序中导航。但是，当有人返回到主页(主页组件)时，ajax调用再次被发送到服务器，这是不必要的。
因此，基本上，当您使用react路由器在组件中导航时，每次加载组件时，都会进行ajax调用。
我们是否可以做一些事情来缓存数据，比如在Angular中，在加载组件时，我们不必一次又一次地进行ajax调用。
谢谢
class NewComponent extends React.Component {
constructor(){
s
浏览 0提问于2016-05-24得票数 0
我正在创建天气应用程序。我有一个用于(我的表单，axios )的'search‘组件，在这个组件中，我将数据存储在state中。当我提交此表单时，我希望加载另一个包含下一个组件的页面。我的问题是，我如何在其他组件中使用“搜索组件”中的数据，这些组件将在表单提交时加载，所以基本上我想提交表单，然后重新加载另一个带有天气组件的页面，然后我想将数据从搜索移动到天气组件。在Weather组件中，a将设置我的背景和其他数据 mport React, { Component } from 'react';
import axios from 'axios';
浏览 16提问于2020-06-21得票数 1
这可能是个愚蠢的问题。但本质上，我正在创建一个React组件，可以在任何普通的HTML / JS文件中使用。我可以使用Webpack在React组件中创建一个bundle.js文件，然后将其注入Vanilla文件的div标记中：
<div id="my-modal-target"></div>
<script src="bundle.js"></script>
由于我试图创建一个模型，所发生的是，每当用户单击"exit“时，我的React组件就会有条件地将该模型隐藏起来。但是，我正试图弄清楚如何通过单击目标
浏览 4提问于2020-04-06得票数 1
回答已采纳
2回答
我已经学习React几个星期了，我正在尝试创建一个react应用程序，它显示一个表单，当提交时，它接受输入并创建madlib语句。但是，当我提交表单时，GenerateMadlib组件没有被呈现。感谢您的帮助！./Madlib.js
const Madlib = () => {
const [formData, handleChange, resetFormData] = useFields({
noun: '',
noun2: '',
adjective: '',
c
浏览 0提问于2021-02-07得票数 0
当我们使用延迟加载的组件(在JS块获取期间)时，我们尝试在我们的React项目(version 18)中添加加载程序，然后显示悬空回加载器，延迟加载的组件在使用效果中获取自己的数据，并显示另一个加载程序。
我们的目标是统一这两个加载器，这样当延迟加载的组件呈现并开始获取数据时，就不会闪烁。
这里的问题是我们有一个接一个的装载机闪烁，我们的目标是使它们平滑，避免闪烁。
这种情况只有在网络被节流时才有效，例如，延迟3秒(当连接非常慢时，这是再现问题的唯一方法，这在我们的例子中很重要)
在JS块获取和数据获取期间，我们可以使用某种机制将它们合并到一个加载程序中吗？
CodeSandbox实例：
Re
浏览 4提问于2022-11-10得票数 1
我有一个react.js应用程序，它从API中加载数据，显示一大堆问题(textboxes、radiolist、checkboxes等)。用户填写它们并将所有答案提交给API，然后API发送一组新的问题。
所有这些问题都位于一个对象中，因此我创建了父react.js组件，它保存当前的一组问题处于状态。当状态发生变化时，它会重新呈现下面的每个问题。这个很好用。
问题是，有时API会连续两次显示完全相同的问题，但是由于这个问题处于状态，而且react.js非常聪明，所以它不需要呈现一个全新的组件，因为旧的组件就可以了(只需要几个小的更新)。
问题是，如果我根据存储在子组件状态中的初始数据(最初在c
浏览 0提问于2017-08-28得票数 1
2回答
我找不到使用next.js在服务器端和客户端获取isAuthenticated变量常量值的方法
我使用自定义的app.js将应用程序包装在Apollo提供程序中。我使用布局来显示用户是否通过身份验证。defaultPage是一个即席组件。
当页面在服务器端时，isAuthenticated被设置为true。但是一旦我更改了页面-这是客户端呈现(不重新加载)- isAuthenticated一直保持在未定义的状态很长时间，直到我重新加载页面。
_app.js
import App from 'next/app';
import React from 'react'
浏览 86提问于2019-11-07得票数 4
1回答
我需要能够动态地将react组件包含到我的项目中，因为我希望设置一个插件系统，而且不是每个用户都启用了相同的插件/组件。而且，它们太大了，无法将它们全部提交给每个用户。我试图找出如何做到这一点，但它似乎反应可能不支持该用例。
TLDR：需要时如何从服务器加载响应组件？我必须切换到角度，因为反应没有templateUrl当量？
浏览 3提问于2015-08-29得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
