这在React中意味着什么？
在React中，这句话指的是组件的状态发生了变化。React是一个用于构建用户界面的JavaScript库，它采用了组件化的开发模式。组件是React中最基本的构建单元，可以将一个页面拆分成多个独立的、可复用的部分。
当组件的状态发生变化时，React会自动重新渲染组件，并更新页面上相应的部分。这种基于状态变化的重新渲染机制使得React具有高效的性能和良好的用户体验。
在React中，组件的状态通常存储在组件的state对象中。当状态发生变化时，可以通过调用setState方法来更新状态。React会根据新的状态值重新渲染组件，并将变化应用到页面上。
React中的状态变化可以触发各种操作和效果，例如更新页面内容、响应用户交互、发送网络请求等。通过合理地管理组件的状态，可以实现复杂的交互逻辑和动态的用户界面。
对于React开发者来说，理解和处理组件的状态变化是非常重要的。可以通过React提供的生命周期方法、钩子函数和状态管理库（如Redux、MobX）等来处理组件的状态变化，以实现更灵活、可维护的代码。
腾讯云提供了一系列与React开发相关的产品和服务，例如云服务器、云数据库、云存储、云函数等，可以帮助开发者构建和部署React应用。具体的产品介绍和使用方法可以参考腾讯云官方文档：腾讯云产品与服务。
相关·内容
1回答
我正在创建一个页面网站并通过GitHub页面发布它，但是嵌套组件的内容(关于和技能)并没有显示出来。我不知道我错过了什么。当前显示的唯一信息包括NavBar、h2标题(来自ProfileContainer)和页脚。生活在我的PortfolioContainer中的每个嵌套组件(关于技能)中的整个身体根本没有显示出来。这就是我所拥有的：
App.js：
import { useEffect, useState } from 'react';
import NavBar from './components/NavBar';
import ProfileContai
浏览 2提问于2022-03-22得票数 0
我在react应用中有一些JSX代码，如下所示：
...
_renderSignOutLink() {
if (!this.props.currentUser) {
return false;
}
return (
<a href="#" onClick={::this._handleSignOutClick}><i className="fa fa-sign-out"/> Sign out</a>
);
...
在调用函数之前，双冒号::是什么意思？
浏览 3提问于2016-08-16得票数 51
回答已采纳
我在reactJS/graphQL-应用程序中使用react-apollo。有时我确实需要对多个部件进行相同的突变。那么，在调用突变后，使用突变和更新数据的最佳方法是什么？
我是应该将突变注入顶层组件并将其传递给所有的孩子(示例2)，还是应该在需要的地方注入突变(示例1)？
通过示例1，可以更容易地在突变调用之后更新现有数据，而传递父组件的doMutation()-function会使更新mor变得更加复杂。
示例1(多次注入)
父级
import React, { Component } from 'react'
import { graphql } from 'r
浏览 3提问于2020-01-04得票数 1
回答已采纳
我是新来的反应者。现在我正在做一个反应-还原项目。当输入标签中的输入发生变化时，我想调用一个函数。为此，我将"onchange“事件应用于以下内容
<input {...this.props} onchange="this.callHandler(this.value)"/>
onchange事件处理程序调用函数"callHandler“，该函数定义为
callHandler = (value) => {
console.log("value in input",value);
}
我不知道为什么不调用这个
浏览 0提问于2017-08-03得票数 3
回答已采纳
我正在为Android和iOS编写一个应用程序，使用的是react本机。iOS版本运行良好，但是每次尝试调用AsyncStorage函数时，Android版本都会崩溃。
当我的应用程序启动时，它会检查设备上是否存储了一些用户信息。它在这里使用这个函数：
static async getActiveUser() {
return null;
try {
let value = await AsyncStorage.getItem('@UserStore:activeUser');
if (value !== null){
r
浏览 0提问于2018-07-16得票数 1
我试图通过一些ReactJS组件为Rails资源添加CRUD功能。我在使用webpacker。
在这个阶段，我在控制台中得到一个错误：
未明错误:目标容器不是DOM元素。
我的设计是：
are文件在app/javascript/Botanicals中。然后，我有了一个app/javascript/packs，其中webpacker正在将其编译为app/public/packs/manifest.json。
我的包文件正在呈现组件：
app/javascript/packs/botanicalsCRUD.jsx
import React from 'react'
impo
浏览 0提问于2019-01-24得票数 0
1回答
可以使用Route53实现基于路径的路由。我在s3 CloudFront上有两个服务1. react应用程序，在lambda上有2. Nodejs服务API。我希望它的名称是xyz.abc.com/它可以服务于react应用程序，而xyz.abc.com/share可以服务于nodejs API。
浏览 9提问于2022-03-17得票数 0
TypeError: props.search is not a function
我是非常新的反应，我试图创建一个‘过滤器’按钮，点击它应该显示一个弹出过滤器元素字段。在所有字段中，只有一个字段是必需的- ReqTitle。填充ReqTitle后，当我单击“搜索”按钮时，它会抛出一个错误-- props.search不是一个函数。
父代码段：
<React.Fragment>
<Button
edge="end"
variant="contained"
浏览 4提问于2020-12-28得票数 2
回答已采纳
父组件
父组件包含输入，它在更改时设置状态"sendLocal“，然后单击按钮获取”本地“状态的值，并将其设置为”sendLocal“
函数
转换处理程序:输入类型更改的触发器.
sendLocalValue :获取“本地”值，将其放入按钮单击"sendLocal“变量触发器中。。
sendValue :这个带有依赖的"sendLocal“的回忆录函数在子组件呈现后作为子组件中的支柱传递。
从“function”导入function，{ useState，useCallback }；从“./ ChildComponent”导入ChildComponent；函数Pare
浏览 5提问于2021-02-14得票数 0
回答已采纳
当我使用react-router转到一个功能组件时，它渲染了两次。但是，当我刷新该组件的页面时，它只呈现一次。
对于测试，创建了空的功能组件，如下所示：
import React from 'react'
const TestFunctional: React.FC<any> = () => {
console.log('Test===>>>') // console log twice when navigate to this component
return <></>
}
expor
浏览 1提问于2021-08-06得票数 1
我正在尝试将用户输入的代码与我数据库中的代码进行比较。现在，我可以将代码带到map函数外部显示，但当我尝试添加它时，它不起作用。这是我的数据库： [
{
"dwelling_code": "ABC-XYZ",
"dwelling_name": "Neves Abode",
"has_superAdmin": true,
"room": []
} 这是父组件： class Dwel2 extends Compo
浏览 11提问于2020-04-10得票数 0
回答已采纳
我理解速记可以用于返回单个执行，但是有什么方法可以使速记返回多个执行吗？
以以下示例(工作)为例：
import React from 'react';
const CompName = () => {
const condition = true;
return (
<div>{condition && console.log("one")}</div>
)
}
export default CompName;
输出：1
现在，如果条件为真，我想执行两个控制台日志：
import Reac
浏览 1提问于2020-05-29得票数 1
回答已采纳
1回答
我使用的是一个react应用程序，我将其部署在netlify上，并通过一个特定的子域(app.domain.com)进行访问。 现在我想为我的每个客户(customer1.domain.com，customer2.domain.com等)创建单独的子域。然而，我想对所有这些子域使用相同的react应用程序(相同的git存储库/相同的分支)。react应用程序逻辑应该决定在不同的子域上显示什么内容。 我的问题是：-我需要在netlify dns面板中配置什么？-我需要在namecheap上配置什么？
浏览 20提问于2020-04-11得票数 3
React本机形式。保持相同的React.useState格式并更新输入。在react中可以做到这一点。是不是可以在原生react中实现？
import React from "react";
import { View, StyleSheet } from "react-native";
import { Input, Text, Button } from "react-native-elements";
import Spacer from "../Spacer";
const RegisterScreen = () =&
浏览 3提问于2020-02-23得票数 0
我目前正在做一个个人的网页应用程序项目与React.js在前端。
我意识到有些人在指定路径时会尝试在App.js上设置Route path。示例：
class App extends Component {
render() {
return (
<HashRouter>
<div>
<Route path="/" exact component={LoginPage} />
<Rout
浏览 0提问于2018-06-11得票数 0
Webpack可以这样做多个条目：
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
}
};
但是，如何为和pageTwo创建两个不同的别名？
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
浏览 1提问于2019-07-03得票数 0
回答已采纳
2回答
下面的代码给出了以下类型错误
没有重载与此调用匹配。重载3中的1，'(callbackfn：(previousValue: TestData，currentValue: TestData，currentIndex: number，TestData[]) => TestData，initialValue: TestData)：TestData'，给出了以下错误。输入'boolean‘不能分配到输入'TestData’。重载3中的2，‘(previousValue: BooleanObject，currentValue: TestData，currentInd
浏览 4提问于2020-05-28得票数 1
回答已采纳
我们使用React组件包装组件库，但在某些情况下，库操作DOM树的方式是，在试图删除React组件时，React将崩溃。
下面是一个复制问题的示例：
function Sample ()
{
let [shouldRender, setShouldRender] = React.useState(true);
return (
<React.Fragment>
<button onClick={() => setShouldRender(!shouldRender)}>show/hide</button>
{
浏览 6提问于2021-09-20得票数 1
回答已采纳
1回答
我在我的Keystone.JS项目中使用了React引导包。为了测试，我尝试在我的索引页面中放置一个按钮。但是，我收到以下警告：
警告：未知道具bsStyle，active，block，navItem，navDropdown，bsClass on tag。从元素中移除这些道具。
这是我使用Button的代码
var React = require('react');
var Layout = require('../../layouts/defaultLayout');
var ReactDOMServer = require('react-do
浏览 3提问于2016-07-21得票数 1
回答已采纳
react内部不支持卷影dom的原因是什么？目前，为了解决样式封装问题，我们需要使用第三方库。
浏览 2提问于2018-10-04得票数 0
这个脚本不是我写的。该脚本是有效的，但它只对一个用户有效。我希望它能对任何用户在某个通道内发送的所有消息做出反应。我认为问题出在message.author.id的事情上，我试着完全删除行，但它只是打破了整个事情，它不会启动不和谐的机器人。任何帮助都是非常感谢的。
from discord.ext import commands
from discord.ext.commands import Bot
import asyncio
bot = commands.Bot(command_prefix = "$")
@bot.event
async def
浏览 0提问于2020-06-14得票数 0
1回答
在下面提供的代码中，我可以看到this.mBaseService定义在第一个debugger之上，而不是在第二个debugger下面。
有人能解释为什么会这样吗？我的一个理论是，React或Next.js可能是内部清理属性。
import Link from 'next/link';
import React, { Component, Fragment } from 'react';
import ReactDropzone from 'react-dropzone';
import { Container,
浏览 2提问于2018-08-12得票数 1
回答已采纳
1回答
本机反应:无法导入和使用外部包
、、、、
我试图使用的反应-本机-选项卡-导航包。我在我的项目目录中做了npm install react-native-tabbar-navigator --save来安装这个包。在我的代码中，我有以下导入行来使用包。
import React, { Component } from 'react';
import {TabBarNavigator} from 'react-native-tabbar-navigator'
import MainTab from './MainTab';
import {
AppRegistry,
Style
浏览 3提问于2016-07-24得票数 2
回答已采纳
1回答
从Django部分转移到反应
、、、、
基本上，我在Django有一个项目，总共有7个应用程序。我想转移其中一个人的反应。说应用程序‘学生’是我想要的反应。我想知道是否有可能这样做，如果有，那怎么做？
下面是我尝试过的，我创建了一个react项目，并使用npm run build命令构建了该react项目。现在，对于学生的基本url，我呈现了模板，它位于文件夹中。就像这样。
urls.py
urlpatterns = [
...
...
path('student/', views.Student, name='student'),
....
]
views.py
def Studen
浏览 5提问于2022-01-21得票数 0
1回答
我在rails中使用react。但是当我运行这个应用程序时，我会得到一个错误: Uncaught错误:目标容器不是DOM元素。
我的index.jsx文件看起来如下：
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import {Provider} from "react-redux";
import thunk from "redux-thun
浏览 2提问于2020-05-29得票数 0
回答已采纳
2回答
对于ES6来说仍然是个新手，所以试着理解为什么下面这两个函数之间会有区别。我在function中工作，并注意到在编写一个设置状态的非ES6函数时，我得到了一个错误。这是在componentDidMount内部发生的。
这种方式在ES6中工作并返回我所需的内容：
(pos) => this.setState({
lat: pos.coords.latitude,
lng: pos.coords.longitude,
})
但是，这样做会引发一个错误-- "Uncaught : this.setState不是一个函数“。
function(pos) {
浏览 6提问于2015-09-04得票数 3
回答已采纳
如果您已经处理了react和refresh路由器，您将看到在每个页面url和部分页面更改中，页面不会刷新整个页面，而是只会更改页面的一部分。而且，在Google的控制台日志中，它不会刷新，从而证明它在没有整个页面刷新的情况下更改了url。
我认为这种技术只有在一些像样的前端框架中才有可能，比如React或frontend。但不是因为
我发现了一个名为nodebb的论坛软件(它使用的是Node.js，可能与春季引导类似)，而且它根本不使用react，但它表明它实际上只能使用node.js这样的后端框架。你可以在上查看
由于我意识到它可以在不使用体面的前端框架的情况下实现，所以现在我想知道在Jav
浏览 4提问于2021-01-03得票数 0
1回答
我想要将Android的默认屏幕过渡从从下到上更改为从右到左。所以这就是我要做的：
import React from 'react';
import { Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'
浏览 0提问于2018-04-24得票数 0
我正在尝试创建一个Next.js反应应用程序。其中一个要求是youtube播放器在更改页面时必须持久化。唯一的问题是我不确定下一步的工作方式是否可行。似乎无论页面的结构如何，页面都会重新安装。
在我的应用程序中，我将索引导出到作为父组件的page.js中。
<Media/> //Youtube player
page.js总是会重装，这样玩家就会重新加载。
page.js：
import React from 'react';
import { Provider } from 'react-redux';
import { checkLang } f
浏览 3提问于2017-11-17得票数 2
回答已采纳
1回答
在codesandbox上的React应用程序中，我有以下获取调用：
如果我激活任何一行
.then(console.log(data))
或
loadOptions={this.state.data}
我明白:抛出了一个跨原点错误。React无法访问开发中的实际错误对象。有关更多信息，请参见https:// fb.me/react十字路口-error。
为什么和如何解决这一问题？
(请注意，我在fb.me前面添加了一个空格，以便在StackOverflow上通过验证)
浏览 0提问于2019-06-14得票数 0
回答已采纳
1回答
我并不是真正面对一个问题，我更想知道什么是我应该使用mobx和react的最佳方式。所以我的情况是：
我对mobx相当陌生，但我有多年使用react的经验(主要是使用redux)。我的新项目是将mobx-state-tree与mobx-react-lite一起使用，以便将组件与包装组件的函数observer连接起来。我已经建立了一个根商店，里面有多个商店。我现在对此非常热心，但我想提出一些建议：
我是否应该使用redux中非常常见的容器逻辑，这意味着我应该只连接一个“容器”组件，该组件将处理与我的存储的连接，并将其扩展到其子组件？还是应该直接与观察者连接，因为需要从存储区提供数据的组件很多？
浏览 6提问于2020-02-02得票数 3
回答已采纳
3回答
我有一个圆和一个渐变来填充它，我放入渐变，并调用他在路径中的样式填充。
import React,{PropTyoes} from 'react';
import {connect} from 'react-redux';
import * as Actions from '../controllers/Actions';
export default class MyComp extends React.Component {
constructor(props, context){
super(props, c
浏览 3提问于2016-06-22得票数 16
回答已采纳
1回答
我有reactJS应用程序(CRA)，每次我需要在多个地方键入相同的值时，都会为properties.But添加.env文件。那么有什么方法可以重用它吗。
我的.env
REACT_APP_SERVER_API=https://api.mysite.com
REACT_APP_AUTH_API=https://api.mysite.com/auth/login
...
但是想要这样的东西
REACT_APP_AUTH_API=${REACT_APP_SERVER_API}/auth/login
我尝试了不同的方式：
REACT_APP_AUTH_API=${REACT_APP_SERVER_A
浏览 2提问于2021-05-20得票数 1
回答已采纳
1回答
我尝试过这种方法：
import React, { Component } from 'react'
export default class AlertHey extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
alert("hey")
浏览 1提问于2018-11-02得票数 0
我创建了一个卡片组件，在Click上我想渲染一些文章，我正在尝试使用react，但我不知道我的代码有什么问题(我是初学者)。 当我点击的时候，url的行为就像我想要的文章的id，但是页面是空白的，控制台上什么也没有出现(甚至我的console.log) class JobCard extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: true
};
}
componentWillMount() {
浏览 7提问于2019-05-12得票数 1
我有以下几点：
const MyField = class extends React.Component {
...
renderField = (reduxFormFieldProps) => (
<React.Fragment>
<Form.Input />
{!reduxFormFieldProps.meta.submitFailed ? null :
<Form.Error />
}
</React.Fragment>
)
render = () =>
浏览 1提问于2018-02-23得票数 6
1回答
反应类型的获取响应意义
、、、
当使用用创建的react应用程序中的fetch api查看响应时，出现了以下输出。
我不明白打字的意思。我是说，什么类型的？
由于react dev端口和strapi端口不同，所以我在package.json中设置了代理配置。
"proxy": "http://localhost:1337"
源代码只是我与strapi一起使用的其他端口的一个简单的获取请求。
useEffect(() => {
(async () => {
const result = await fetch(`${process.env.REACT
浏览 0提问于2021-06-17得票数 1
回答已采纳
1回答
我目前需要帮助应对本机导航问题。我的目标是将'userid‘传递给我的详细信息屏幕，但它不起作用
包版本：
"@react-navigation/native": "^6.0.7",
"@react-navigation/native-stack": "^6.3.0"
我的守则：
export default function MessagesScreen({navigation}: any) {
const [loading, setLoading] = React.useState(false);
co
浏览 4提问于2022-02-19得票数 1
回答已采纳
我有一个关于aws ec2实例的react应用程序。我有安装npm模块的困难。
获取此错误：
许可被拒绝，mkdir '/home/react-app/node_modules/node-sass/vendor‘
我试过这个解决方案，但对我没有用。
更新
sudo npm install --allow-root --unsafe-perm
我试过这个，它成功了，但是，当我要构建这个应用程序时
sudo npm run build
会运行这个命令，
node-sass-chokidar --include-path ./src --include-path ./node_
浏览 1提问于2019-02-13得票数 1
回答已采纳
2回答
当没有人进入赠品时，机器人应该返回“没有人进入”，但即使是这样，它仍然会显示"@Dbot winner“。我是不是在代码中遗漏了什么？ let msg = await message.channel.send(
"**?GIVEAWAY?**",
{
embed: {
title: `${(args.slice(2, args.length)).join(" ")}`,
color: 3447003,
description: `React wi
浏览 32提问于2021-02-05得票数 1
我正在使用i18next翻译我的NextJs应用程序。翻译在我的浏览器中加载非常好，但在我的控制台中仍然很少看到错误。
i18next: hasLoadedNamespace: i18next was not initialized undefined
i18next::translator: key "resources.welcome_string.value" for languages "en-US" won't get resolved as namespace "myStrings" was not yet loaded Th
浏览 15提问于2021-05-14得票数 3
我试图完成对API的axios请求，并且遇到了一个内部服务器错误- 500，我很好奇这是否仅仅是我的代码和/或我试图进行这个调用或其他什么的。尽管CORS问题似乎已经过去了，但我还是会从头开始，以防它与我当前的问题有关。
我对请求的最初尝试给了我以下CORS错误：
...from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: It does not have H
浏览 4提问于2020-11-13得票数 0
回答已采纳
1回答
解决这样的问题最好的方法是什么：
我们在页面上得到了分页结果(例如，10篇博客文章)我们点击了一些帖子上的LIKE按钮如何使用Laravel & React?更新页面的新状态
Laravel不支持POST请求分页。我们是否应该发送另一个GET请求来刷新页面的状态？
浏览 1提问于2019-10-26得票数 0
1回答
我正在尝试得到一条消息，以显示后，一篇文章，在反应从一个Laraval服务器使用InertiaJS。
根据我在docs / online /在其他(半)相关问题中可以找到的内容，下面是我认为应该有效的独立版本--我的印象是应该将它添加到我的道具中。我的测试组件会重新加载，所以重定向只是在没有消息和道具未定义的情况下工作--我不理解什么？
Laravel控制器：
use Illuminate\Support\Facades\Redirect;
use Inertia\Inertia;
use Illuminate\Routing\Controller as BaseController;
cl
浏览 6提问于2022-02-02得票数 2
回答已采纳
我正在尝试在React Native项目中使用console.log，但是chrome工具无法加载。iOS仿真器显示一条警告，指出远程调试器位于后台选项卡中，但没有打开调试器的实例。当我导航到localhost:8081时，它只显示"React Native packager is running“。带有指向文档主页的链接。我昨天只是在没有任何问题的情况下登录。有什么想法吗？
浏览 12提问于2021-02-16得票数 0
回答已采纳
下面的代码在TypeScript编译时抛出一个错误。
import React, { SFC } from "react"
import { Link } from "react-router-dom"
import { HashLink } from "react-router-hash-link"
import MarkdownToJSX from "markdown-to-jsx"
interface AnchorProps {
baseUrl: string
relativeUrl: string
href:
浏览 2提问于2020-02-24得票数 3
回答已采纳
我试着用不同的方式编写javascript函数，以便在文本框中记录用户的条目。
以下代码可以很好地工作：
option1：(工作正常)
import React from "react";
class PlayMaster1 extends React.Component{
handleComponent(e){
console.log(e.target.value);
}
render(){
return(
<div>
<input type="text" onChange={this
浏览 2提问于2020-02-01得票数 0
回答已采纳
我试图将库用于确认对话框。但当确认弹出为react版本升级打开时，它给了我一个警告。警告:在React 18中不再支持ReactDOM.render。使用createRoot代替。在切换到新的API之前，应用程序将表现得好像它正在运行running 17一样。有什么办法可以摆脱警告吗？或者有什么好的可供选择的库可以用于确认对话框？
谢谢!
浏览 7提问于2022-05-02得票数 0
1回答
一种关闭GPS定位的方法
、、、
在使用React Native开发移动应用程序时，我们需要获取用户的位置。可能会出现用户关闭GPS的情况。有没有办法使用React Native找到大概的位置？当GPS关闭时，我无法访问坐标。
例如，在安卓清单中有ACCESS_COARSE_LOCATION ，这可能是我想要在React Native应用中获得的东西。
浏览 4提问于2016-04-22得票数 0
我刚开始使用reactjs，我已经尝试了解身份验证令牌是如何工作的，以保护路由。在各种教程中，人们在登录用户时从api中获取该令牌，然后将其与"isAuthenticated“变量一起存储在localStorage中。然后，在路由时，他们检查isAuthenticated是否为真，而不使用任何api调用来验证令牌。这安全吗？我试图以同样的方式实现授权，只是添加了一些isAuthorized变量，但这两者不能都被篡改，因为react客户端？
浏览 4提问于2021-12-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
