如何在react中比较两个组件的状态变量？
在React中比较两个组件的状态变量，可以使用shouldComponentUpdate生命周期方法或者React Hooks中的useEffect钩子函数来实现。
- 使用
shouldComponentUpdate方法：- 在组件类中，重写
shouldComponentUpdate(nextProps, nextState)方法。 - 在该方法中，比较当前组件的状态变量和下一个状态变量，判断是否需要重新渲染组件。
- 返回
true表示需要重新渲染，返回false表示不需要重新渲染。 - 示例代码：
- 示例代码：
- 在组件类中，重写
- 使用React Hooks中的
useEffect钩子函数：- 在函数组件中，使用
useEffect钩子函数监听状态变量的变化。 - 在
useEffect回调函数中，比较前后两个状态变量的值，执行相应的逻辑。 - 示例代码：
- 示例代码：
- 在函数组件中，使用
以上是在React中比较两个组件的状态变量的方法，根据具体的业务需求选择适合的方式。
相关·内容
我的React应用程序目前在结构上相当简单，尽管组件中的逻辑越来越强烈。这个结构基本上是Index，它有一个Header组件，如果用户登录，它将加载Home组件，其中包含组件X、Y和Z，对应于左侧的侧边栏、主区域和右侧侧边栏。
当我正在处理右侧栏时，我有一些console.log()语句可以帮助解决问题。现在我注意到，根据我看到日志记录的频率，右边的Z组件在给定的新页面加载时呈现7次。该组件的代码大致如下：
使用React.useState([default value])Checks (authedUser)A Redux存储库为组件声明各种状态，以获取我的应用程序(authedUser)A
浏览 6提问于2022-08-11得票数 0
问题
我正在使用google map API，并在google地图上显示事件(帖子)的位置，但是这里是一个问题。
当我单击一个标记来查看<InfoWindowF/>时，其他的<InfoWindowF/>也会弹出，因为我为所有<MarkerF/>使用了相同的useState( )和state变量。我想给不同的useState( )或可能性更好的方式，使一定的信息弹出时，某些标记被点击。我该怎么做呢？
代码
import React, { useState } from 'react'
import { GoogleMap, useLoadScr
浏览 6提问于2022-09-01得票数 1
回答已采纳
我的父组件处理对服务器的请求，并向其子组件提供来自响应的数据。在这种情况下，一个子组件(FilterSidebar：contains组件)应该只呈现一次，因为过滤器将从初始请求的数据中创建。
这就是为什么我想使用React的备忘录钩子。相应的数据只传递一次给过滤器组件。永远不会调用areEqual函数中的日志，并且组件将始终再次呈现。
父组件：
import React, { useState, useRef } from "react";
import { useQuery } from '@apollo/react-hooks';
import { REQU
浏览 2提问于2020-07-26得票数 3
我已经将这些内容写到要搜索JSON文件的组件中。第一个组件包括两个部分1--它返回JSX表示元素和2元素--它通过JSON文件查找匹配项，并在Const中填充数据，并将其传递给为显示结果而创建的另一个组件的支柱。问题是组件的呈现()方法没有重新加载新输入的数据，而变量正常工作，数据从第一个组件传递到第二个组件，没有任何问题。
import react from 'react';
import React, { Component } from 'react';
import './index.css';
import ResultP from &
浏览 2提问于2022-01-12得票数 0
回答已采纳
我正在尝试使用useRef viz清除react表组件的filtered状态。ref.current.setState({...})。这是我的组件中的一段代码：
const Customers = (props) => {
const customerTableRef = useRef()
useEffect(() => {
const customerTable = customerTableRef.current
if (customerTable) {
customerTable.setState({ ...customerTable.s
浏览 4提问于2020-03-17得票数 0
1回答
我有一个关于react-native组件可能性的问题，为了解释我的问题，我实现了以下示例代码；
export default class App extends Component {
render() {
return(
<View>
<FirstChild/>
<SecondChild/>
</View>
);
}
}
class FirstChild extends Component {
render() {
return(
<V
浏览 0提问于2019-11-15得票数 0
1回答
我有三个复选框，当被选中时触发一个函数。我使用的是，我的代码是这样的：
let departmentArray = ([]);
function handleCheck(val) {
//DEPARTMENT ARRAY LOAD
const index = departmentArray.indexOf(val);
if (index > -1) {
departmentArray.splice(index, 1);
} else {
departme
浏览 6提问于2022-06-14得票数 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
回答已采纳
1回答
我正在使用react js。我想使用chartjs从我从api获取的数据中制作一个图表。在这里，我只想绘制下面两个数组之间的图表。
symbolsdateforchart: []
closingdateforchart: []
但是，我不确定如何使用这些值(请查看我的代码)，因为它还没有赋值，并且值是在componentDidMount()中赋值的，我在this.state中制作图表。有没有更好的方法在上面提到的两个数组之间使用chartjs制作图表？或者我能以某种方式让它工作吗？任何帮助都是非常感谢的。
我的代码：
import React from "react"
浏览 28提问于2020-05-13得票数 0
我尝试使用带有React的js 数据结构，但是它不会像我想的那样更新。考虑以下两个例子。按下按钮应该是绿色的。
第一个有一组(不工作)
let buttons = [
"Button 1",
"Button 2",
"Button 3",
"Button 4",
"Button 5",
"Button 6",
"Button 7",
"Button 8",
]
let pressedInitial
浏览 3提问于2021-03-20得票数 1
回答已采纳
我刚刚开始学习ReactJS，并有一些问题。我正在阅读文档，但是我找不到我想要的答案。下面是一个示例：
var Awesome = React.createClass({
getInitialState:function() {
return {
txt : ["1","2","3","4","5"],
isTrue : true
}
},
handleClick:function() {
this.setState({
isTrue : !
浏览 2提问于2015-06-03得票数 1
回答已采纳
我想点击菜单中的一个选项。然后，此选项应在子组件中显示与该选项相关联的所有项目。我知道我在两个地方出了问题。首先，我在onClick函数中出错了。其次，我不确定如何显示子组件中仅单击的选项(Eg.Brand、假日目的地、电影)的所有项目。任何帮助都将不胜感激。
horizantalscroll.js
import React from 'react';
import ScrollMenu from 'react-horizontal-scrolling-menu';
import './hrizontalscroll.css';
import I
浏览 0提问于2020-05-16得票数 0
我有下面的代码，一切都可以正常工作。 现在，我想添加一个新的组件，它将呈现不同的导航栏并具有不同的路由。 如何在初始加载时有条件地呈现不同的组件？ 选项:将当前的App.js代码拆分为两个不同的组件，每个组件将有自己的导航栏和路由。 此选项将是最理想的，但我想先呈现一个组件，如果用户访问站点的不同部分，则加载另一个组件。 import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-d
浏览 53提问于2020-06-15得票数 1
我正在使用api获取一些数据。在该api内部有一些执行的SQL查询。我有api，将用于获取数据或执行这些查询。我想知道如何将图表的静态数据替换为将从api获取的动态数据。 这是我的TabDashboardDetail.js，我在这里根据api数据获取所有图表的标题： import React from 'react';
import DefaultScrollView from '../components/default/DefaultScrollView';
import ChartView from '../components/default/
浏览 13提问于2021-04-22得票数 0
回答已采纳
当我第一次登录时，会出现注销链接，并且open变量的初始状态是true，但是我的open变量的初始状态应该是false，我想它不会显示这个链接。 我尝试添加注销toggleOpen()方法是否在渲染时自动调用，但发现它没有被调用。 import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Meteor } from 'meteor/meteor';
clas
浏览 32提问于2019-06-30得票数 0
我是新来的，还在学习，遇到了问题，我没有足够的知识来解决这个问题。
我已经设置了带有Flask和路由"/ API /stats“的api设置，返回我想要显示的数据数组。我遵循了一个教程，但是我很难将它实现到我的代码中。
记录器显示" fetchDev“动作开始，然后fetchDev调用动作"startDevSearch”可以在控制台看到它，"startDevSearch“中的状态isFetching从假变为真，然后我得到"TypeError: e是未定义的”错误，在“网络错误”之后不久。我用Fiddler嗅探了流量，浏览器成功地向"“发出请求，得
浏览 0提问于2018-05-25得票数 0
回答已采纳
我试图建立我的第一个反应项目，目前正在设置一个汉堡导航按钮，和一个菜单显示时，点击导航。
我把它分成两个部分:汉堡和MenuOverlay。两者的代码如下所示。
目前，我有一个关于汉堡的onClick，在上面切换一个类，但是我如何从那个点击中切换菜单？它隐藏在显示中:无；默认情况下。可能是一个非常基本的问题，所以道歉
MenuOverlay
import React from 'react';
import { Link } from 'react-router';
const MenuOverlay = () => {
return (
浏览 2提问于2017-01-26得票数 7
回答已采纳
我使用的是函数组件。我已经构建了独立的组件，并将它们放入index.js文件中。
现在组件的结构是(伪代码)：
<App stateVariable1={x} stateVariable2={y} stateVariable3={z}>
<ChildOne props1={x} props2={y} />
<ChildTwo props1={z}/>
</App>
ChildOne和ChildTwo当前呈现在App.js中，因此将状态变量传递给这两个子级非常容易。
我想将呈现的子代提取到index.js中，并在App.js中用{props
浏览 0提问于2021-05-14得票数 0
1回答
本质上，我想让父元素控制其子元素的值。通过以前使用React输入，我知道您需要传递一个onChange支柱，以便父程序可以更新它传递给其子节点的值。
我已经将value和onChange道具设置为可选的，因为我还想支持这样一种情况，即您将子作为一个不受控制的输入。
这两个不受控制的和未处理的控制变体的儿童工作。但是，已处理的受控变量没有。
有什么办法让这件事起作用吗？我已经将下面的JSFiddle链接到我的最小示例中，显示了我的问题：
代码：
const Parent = () => {
const [parentValue, setParentValue] = React.u
浏览 1提问于2020-05-01得票数 1
回答已采纳
1回答
我试图在React.js中创建一个非常简单的绘图。实际上，我只是将我创建的Vanilla JS代码转换为React应用程序。
一切看起来都正常，但是渲染点的组件并没有在道具上重新呈现。然而，它的道具正在改变(我在react dev-tools中查看了它)。我正在使用自定义事件侦听器，这可能是错误的原因吗？
import React, { useEffect, useState} from "react";
const addPoint = ({points, setPoints}) => (event) => {
const newPts = points
浏览 3提问于2020-07-07得票数 1
回答已采纳
1回答
redux存储中有两个状态项，它们都从API中获取数据。
componentDidMount() {
this.props.postMDBConfig(`https://api.themoviedb.org/3/configuration?api_key=${this.props.apiKey}`);
this.props.postMoviePopular(`https://api.themoviedb.org/3/movie/popular?api_key=${this.props.apiKey}&language=en-US&page=1&a
浏览 1提问于2019-10-19得票数 0
回答已采纳
我在个人资料页上有一个链接，链接到另一个类似的个人资料页。如果您直接转到链接的地址-页面将正确加载。但是如果你点击页面上的链接，只有行的地址改变，内容不会更新。 链接不起作用： <Link to={`/project/2`} params={ 2 } ></Link> 此链接位于页面上的以下位置： <Link to={`/project/1`} params={ 1 } ></Link> 我的意思是，事实是我们实际上已经在页面/项目/x上了，对x的任何更改都不会导致内容更新。如何解决这个问题？ 更新:用于渲染配置文件页面的代码： import
浏览 8提问于2019-02-02得票数 0
回答已采纳
1回答
我有一个非常小的应用程序。它由一个输入元素和一个表组成。当按下表中的单元格时，输入元素将显示在表中按下的单元格。但是，我注意到，在输入元素中显示选定的单元格需要花费惊人的时间(0.3s)。然后我做了一些分析，并进行了console.logging，这是输出：
我仍然是一个反应的初学者，并想知道我正在监督什么样的设计模式这样的功能。我不明白为什么会重新呈现整个应用程序(至少在虚拟DOM中是这样)，尽管只有一小部分( <ShowSelectedCell/>)应该改变。
最小示例: Index.js
import React from 'react';
imp
浏览 13提问于2021-12-28得票数 2
我有一个问题，我想从子组件中获取值并在父组件中使用它。
这是父组件，我通过props将一个值i传递给它的子组件，我想要取回它，那么我该如何实现呢？
import React, { Component } from 'react'
import { render } from 'react-dom'
import {Row} from 'react-bootstrap';
import Rectangle from './Rectangle.js';
import '../App.css';
class Rect
浏览 0提问于2017-05-01得票数 2
我使用的是来自https://github.com/vydimitrov/react-countdown-circle-timer的第三方组件(timer 每次倒计时计时器结束时，我都会尝试更改图像。我在考虑对useState使用一个计数，这样每次在数组中它都会加1。我不确定，我对React-Native来说是相对较新的。 如果您需要查看我的更多代码，我已将其上载到GitHub：https://github.com/JRyanSaunders/Fitness-App import React from "react";
import {
StyleSheet,
T
浏览 19提问于2020-09-03得票数 0
回答已采纳
我将一个页面分为两个部分:左侧是动态的，右侧是滑块/旋转木马。所以我的组件是: MainProfile，它是容器，Profile和Credit，它必须显示在左侧(或一个或另一个)，以及MyInfo在右侧。现在，我必须根据myinfo中传递的状态渲染Profile/Credit (当滑块为1时，我需要在左侧有Profile，当滑块为2时，我需要在左侧有Credit )。我试过使用这段代码，但console.log总是打印'profile‘和'credit’。我哪里错了？
MainProfile.js
import React, {Component} from "reac
浏览 30提问于2019-10-27得票数 0
2回答
我想知道您是否可以在下面的场景中评论一下最佳实践:我有一个react页面，并且正在使用异步调用来获取一些数据。在页面上，我呈现了一些返回的数据。(setTimeout在那里，所以我可以看到它加载-而且API是公共的，所以您可以看到它返回了什么)
App.js
function App() {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
fetch
浏览 1提问于2020-10-22得票数 0
回答已采纳
请建议如何获取没有状态的每一秒的当前时间，因为它在每次更新状态时都会渲染组件。请检查以下使用state完成的代码
export default class Local extends React.Component {
state = {
messages: [],
currentTime: Date.now()
}
updateCurrentTime() {
setInterval(() => {
this.setState({
currentTime : new Date().getSeconds()
})
}, 1000)
}
componentDidMoun
浏览 8提问于2021-03-11得票数 0
回答已采纳
我有这个反应元件。它正在成功地工作。
import React, { Component } from 'react'
import Lightbox from 'react-lightbox-component';
const LightBoxTest = () => (
<div>
<Lightbox images={[
{
src: '../images/int_01.jpg'
},
{
src: &#
浏览 0提问于2019-02-17得票数 0
回答已采纳
1回答
如何导出react.js的状态变量？这意味着我们在react.js中有一个状态变量，并且这个状态变量需要在另一个组件中，然后我们如何导出该组件。
浏览 4提问于2022-01-26得票数 -2
我正在使用react中的搜索栏，它将在另一个文件中调用unsplash- api，我有一个搜索栏组件，我正在考虑在主文件中进行api调用，或者在src文件夹中的另一个文件中进行api调用。
到目前为止，我已经设置了一个组件并设置了初始钩子，但我不知道如何继续
import React, { useState } from 'react';
import './SearchBar.css';
const SearchBar = () => {
const [search, setSearch] = useState('');
ret
浏览 0提问于2019-07-30得票数 3
我想在单击卡时将image_url作为道具发送到另一个组件。以下是我的代码，但我既没有收到错误，也没有发生任何事情！
// Component A whose information I want to send as props.
import React, { useEffect, useState } from "react";
import { apiDataTop, apiDataUpcoming, apiDataDay } from "../../api";
import styles from "./TopAnime.module.css&
浏览 0提问于2020-09-24得票数 0
我很困惑为什么我会得到这个错误:太多的重新呈现。React限制呈现的数量，以防止无限循环。当我试图调用useState来保存checkBoxList数据时，就会发生这种情况。如果我注释掉行setListOptions(checkBoxList);，错误就消失了。我所期望的是，setListoptions应该被保存在本地，然后我可以调用listOptions来映射我的数据。谢谢你的帮助。
const ZoneDashboard: React.FC = () => {
const [listOptions, setListOptions] = useState<EnumMappin
浏览 1提问于2021-03-22得票数 0
正如许多人所知道的，this.someFunction = this.someFunction.bind(this)可以用于React类组件。然而，有时为非常简单的组件创建类是很麻烦的。那么，如何在不创建类的情况下将函数绑定到this？
浏览 5提问于2019-02-14得票数 3
回答已采纳
我正在使用Next.js和Next Link来处理我的React应用程序中的路由。
假设我有2页：/product-list?year=2020和一个将被路由到/product-list/details?year=2020&month=4的详细页面
在pages/product-list.js中，我使用React路由器获取year查询param来进行API调用。
const ProductList = (props) => {
const router = useRouter();
const year = router.query.year;
useEffect(
浏览 6提问于2021-04-17得票数 0
我正在尝试确定在React组件中提高onScroll事件侦听器性能的最佳方法。我有一个简单的监听器来跟踪scrollY来跟踪这个(跨浏览器)，我有以下内容：
handleScroll = (event) => {
let scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
}
现在，我需要确定用户是向上滚动还是向下滚动。我希望实际的event对象会有某种标志，但我经常看到有人建议跟踪以前的scrollTop，并与函数的每次迭代进行
浏览 15提问于2018-09-04得票数 1
回答已采纳
1回答
多步验证var
、、、
我想在我的React Redux应用程序中实现valdiate方法。我有一个还原器，它为状态添加了一些元素，但我需要验证这一点：
该元素存在于该列表中。如果存在，应用程序将显示错误(我们只能添加一次元素)我们不能向状态中添加更多的10个(例如)元素。
将来，我可以在我的应用程序中添加新的验证规则。我创建了这个简单的函数
function addDeviceToProtocol (e) {
e.preventDefault();
if (handoverProtocol.list.find(x => x.id == device.id)) {
浏览 2提问于2021-01-02得票数 2
回答已采纳
我只想知道最好的处理方法(不需要代码，只需要方法)。当我点击LI元素时，我试图显示下拉菜单。
var Balloon = React.createClass({displayName: "Balloon",
getInitialState: function() {
return { shaded: false };
},
handleClick: function(event) {
this.setState({ shaded: !this.state.shade
浏览 3提问于2015-04-28得票数 0
回答已采纳
以下是代码：
import React, { useState } from 'react'
function App() {
const [a, setA] = useState(1)
setA(2)
return (
<div>
<h1>{a}</h1>
</div>
);
}
误差太多的重新渲染。React限制呈现的数量，以防止无限循环。
为什么它会导致无限循环？
我认为原因是函数组件就像呈现函数一样，所以当setState在render函数中时会导致无限循环。
有官方解释吗？
浏览 10提问于2020-02-20得票数 5
回答已采纳
在我的代码中，我循环遍历一个数据数组，并将该数据显示为单选按钮选项。我想要做的是删除用户从呈现的其他列表中选择的项。我只成功地从用户扩展的当前列表中删除数据，而不是从其他列表中删除数据。
我的代码：
import React, { useState} from 'react';
import { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import {RadioButton, List} from 'react-native-paper
浏览 6提问于2022-03-08得票数 0
1回答
我正在尝试将问题和相关选项的集合推送到名为‘quizze’的firebase ref中。当单击submit时，我在控制台中得到以下内容。
Uncaught Error: Firebase.push failed: first argument contains an invalid key ($$typeof) in property 'quizzes.questions.0'. Keys must be non-empty strings and can't contain ".", "#", "$", "/
浏览 0提问于2016-10-01得票数 0
3回答
我现在试着教自己如何反应。我遇到了这种奇怪的行为，无法解释发生了什么，所以我希望得到一些答案。
在下面的代码片段中。我有一个变量index，最初设置为0。单击该按钮时，我希望handleClick()更新index的值。然而，它并没有像我所期望的那样做。
const { useState } = React;
const Home = () => {
let names = ["Hello", "World"];
let index = 0;
const [name, setName] = useState(names
浏览 7提问于2022-04-10得票数 0
，我想做什么？
当我只更新一个值而其他值保持不变时，当调整对象的状态时，停止重新呈现。
当前尝试这样做的代码是什么？
前端组件呈现信息：
export default function ReactComponent() {
const [characterState, setCharacterState] = useState(data.character);
useEffect(() => {
socket.emit("/character/read");
socket.on("/character/read", functio
浏览 3提问于2021-08-03得票数 1
2回答
import "./index.scss";
import { BsInfoCircleFill } from "react-icons/bs";
import { BsCheckCircleFill } from "react-icons/bs";
import { MdOutlineWarning } from "react-icons/md";
function Alert(props) {
if (props.icon === <BsInfoCircleFill />) {
}
re
浏览 1提问于2022-06-13得票数 0
2回答
问题
我在react本机中使用平面列表，并希望将其与平面列表中的变量进行比较，如果两个变量相等，则呈现文本组件，但如果不相同，则不呈现任何内容。我尝试过很多方法，但它们都没有用。我希望有人能帮我想出一种方法来做这件事！谢谢。
浏览 5提问于2017-12-01得票数 2
回答已采纳
我在index.html页面中有一个JS全局变量，我需要在react JS应用程序中调用这个变量，我尝试将结果存储在本地存储中，然后从react应用程序中调用它，第一次在react应用程序中调用localstorage时返回"null“值，但是如果我刷新页面显示的值，我如何从第一次获取值，而不刷新页面？！
<script>
var langObject='';
$.getJSON('http://getJSON.com/en', function(data) {
langObject = data;
localStorage.
浏览 1提问于2016-12-10得票数 0
当我将获取的数据传递给支持时，它会在组件中返回一个额外的proto对象。在将数据传递给支持之前，当我用componentDidMount()记录数据时，它会返回我希望使用的正确的单一对象格式。但是，当我把它作为道具传递下来时，它会返回两个对象。一个带有proto，另一个是正确格式化的对象。
如何将单个对象格式传递给道具？
Api端点
export const fetchWorldData = async () => {
try {
const response = await axios.get(worldData);
return response;
} cat
浏览 1提问于2020-07-14得票数 0
回答已采纳
2回答
我有一个React类组件，它在默认情况下呈现null，并在调用activate()函数后呈现一些子级。大致如下：
class MyComponent extends React.Component {
...
activate() {
this.setState({showComponent: true})
}
...
render() {
if (this.state.showComponent) {
return <Child />
} else {
浏览 1提问于2021-04-24得票数 0
我知道有一大堆类似的现有问题，但对于我的情况来说，没有一个问题真的足够简单。 这是到目前为止我的承诺的行为： ? 至少在第62行和第63行，我们可以通过控制台看到找到了准确和正确的值。我的目标是要么将其作为值传递到someVar中，要么以某种方式使用更新后的值更新第70行。 现在，我的按钮只是简单地呈现Object [Promise]，并且在promise解析后不会改变。 这基本上是我编写的第一个promise函数，老实说，我很迷惑，尽管其他人的一些详细解释超出了我需要知道的范围，以便为api调用构造一个简单的promise。 完整代码： import React from '
浏览 20提问于2019-05-26得票数 1
回答已采纳
我试图将输入字段中的数据作为列表元素输出。然而，我总是在终点线前收到错误消息"addData不是函数“。有没有人碰巧知道我的错误在哪里？我觉得大多数人应该是对的。感谢你们所有人！
这是我的App.js
import "./styles.css";
import Form from "/src/Form";
import { React, useState } from "react";
export default function App() {
const [displayData, setDisplayData] = useS
浏览 4提问于2022-09-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
