有没有办法在使用多个useState时简化条件渲染？

文章/答案/技术大牛

发布

1回答

javascript、reactjs、react-native、react-hooks

我有3个不同的音频文件显示在一个页面上。我想根据播放的音频文件显示不同的文本。有没有办法使它更紧凑，但仍然具有可读性？] = useState(false);} else if (refAudioEnded) {} 编辑:详情如下： const [refE

浏览 21提问于2021-09-28得票数 0

1回答

如何使用useState钩子一次更新多个状态？

javascript、react-native、use-state、react-functional-component

在功能组件中，我们使用useState，而不是classComponents的this.setState。但据我所知，useState一次只能设置一种状态，而setState允许一次设置多个状态(例如this.setState({a1: true，a2: false}))。这是否意味着如果你想用useState同时设置两个状态，你会得到一个双重的重新渲染，这是无效的？有没有办法绕过这个问题？

浏览 22提问于2020-10-13得票数 1

回答已采纳

2回答

React props状态同步导致不必要的首次重新渲染

reactjs、react-redux、react-hooks

它做了我想要的，那就是同步道具到状态，并在状态改变后重新渲染。 const[name, setName] = <

浏览 0提问于2020-04-30得票数 2

1回答

将material-ui TextField与datetime本地类型一起使用时，是否有阻止输入清除的限制？

reactjs、typescript、material-ui、react-hooks

如果执行下面的代码并只输入日期，渲染过程将运行，日期输入将被清除。此TextField旨在用作此组件的搜索条件。TextField } from '@material-ui/core'; const [loading, setLoading] = React.useState(false) React.useEffect((

浏览 19提问于2019-04-02得票数 2

回答已采纳

1回答

修复用于呈现Mui <Cards>的条件状态行为

javascript、reactjs、material-ui

在卡片悬停时，我希望卡片内部出现一个浮动的操作按钮。我使用状态来实现这一点，问题是在状态更改期间，悬停状态将应用于所有卡，这意味着按钮将显示在每一张卡上，而不是指向/悬停的那张卡。我如何控制这一点，使按钮仅显示在卡片上触发状态操作的位置。另外，有没有什么办法不会导致状态改变而重新呈现其他组件？我有一个<ChartistGraph>，它是在悬停时重新渲染的，它的动画不断重复。本

浏览 0提问于2021-03-16得票数 0

2回答

防止在useEffect过程中多次更改状态时重新渲染

reactjs

在我的React应用程序中，我将在单个组件中多次实现useState。然后，在我的useEffect中，我将更改其中几个的状态： import React, { useState, useEffect } from 'react'; const [someState3, setSomeState3] = useState(false);

浏览 50提问于2020-04-15得票数 2

回答已采纳

1回答

反应多条件检查(JSX)

reactjs、conditional-rendering

我一直在尝试根据登录的用户进行一些条件渲染。在React JSX中有没有一种方法来检查是否有多个条件为真？我知道这种语法是错误的，但是有没有办法只用JSX就能做到这一点呢？

浏览 18提问于2021-11-15得票数 0

回答已采纳

1回答

如何在React中删除此div

html、css、reactjs

当按钮被点击时，我想要一个写电子邮件的区域。当单击删除图标时，该区域将被删除。我该怎么做？

浏览 61提问于2021-03-25得票数 1

2回答

将记录器输出呈现到Tesseract.js上的组件(使用React)会变慢

react-hooks、tesseract.js

const [ocr, setOcr] = useState('Recognizing...'); </p>这会导致浏览器显著减慢(可能是由于React在每次状态更新时重新

浏览 4提问于2020-07-11得票数 0

1回答

FullCalendar - React -加载函数问题

html、css、reactjs、fullcalendar、fullcalendar-5

我正在使用FullCalander v5进行React，测试资源时间轴视图。我遇到了一个“加载”函数的问题，其目的是检查全日历状态，在加载状态为真的情况下，显示微调器类型的组件(使用条件渲染)而不是时间轴，使用useState将微调器组件的状态设置为真。问题是，从渲染方法内部的Fullcalendar组件启动useState时，会启动一个无限的呈现循环。有什么想法可以打破这一趋势吗？ // Lo

浏览 35提问于2021-03-26得票数 2

1回答

具有多个相同类型组件的React页。在单击按钮时显示更多相同的组件，防止在原始集中重新渲染

javascript、reactjs、react-hooks

我有一个react摘要页面，它通过使用ReportProgressSummary组件来显示折线图。在初始加载时，数据集被映射以显示这些组件中的多个。该组件显示了一个动态的线形图渲染，因此重新渲染非常明显。有没有办法防止重新渲染初始组件？我在想，我需要记录在ReportProgressSummary组件中达到的百分比值，并能够根据它的最终值进行测试，看看是否需要重新呈现……也许可以使用useRef()，但我不太确定如

浏览 12提问于2020-01-17得票数 2

回答已采纳

3回答

React函数组件使用Redux重新呈现

reactjs、redux

我对与React一起使用功能组件相关的事情感到困惑。const Trending = ({ match, actions, trendingPlaces, meConfig }) => { }当我检查我的日志时，

浏览 4提问于2019-08-07得票数 0

1回答

正在尝试在上传前预览图像

html、reactjs

我正在尝试渲染一个由用户挑选的图像，并在页面上输入一个文件类型，这样用户就可以在提交和上传之前预览图像，但我无法获得它的值。我一直在尝试使用输入值作为<img />组件的源： import React, { useState } from "react"; return ( <di

浏览 8提问于2021-01-26得票数 0

回答已采纳

3回答

read : TypeError:无法读取未定义的属性(读取'forEach')

javascript、reactjs、next.js、react-table

当我试图将数据呈现到react表中时，我得到了上述错误。数据是通过axios从api中获得的。这是代码import React, { useEffect, useState, useMemo } from "react";const ViewTcMapping = () => {

浏览 2提问于2022-01-14得票数 -1

1回答

我需要手动定义onChange处理程序来填充状态变量吗？

reactjs

假设我有一个具有多个输入控件的表单，这些控件应该绑定到各自的状态变量。我真的需要为每个状态变量定义手动onChange=..处理程序，以便在单击Submit或按Enter时填充状态变量吗？例如： const [lastLoginDate, setLastLoginDate] = useState(); const [confirmed, setConfirmed] = useState(我希望有一种方法可以简单地指定 <input type="text" stateVar={lastLoginDa

浏览 7提问于2021-04-24得票数 0

回答已采纳

1回答

如何在React中再次运行CSS动画？

javascript、reactjs、css-animations

有时，我需要在React中再次运行CSS动画，在它完成后，在特定的条件下。这种情况背后通常有相当复杂的逻辑，所以我简化了它，以便在不增加复杂性的情况下显示我的意思。禁用复选框时，动画将停止，但如果已在运行，则动画将完成其循环。我想知道使用React重新运行动画(即删除类并重新添加)的正确方法是什么。, setIsSpinning] = useState(true); const [isChecked, setIsChecked] = useState</em

浏览 68提问于2021-07-08得票数 3

4回答

如何避免在每次渲染时都执行useState函数参数(以获取初始值)？

javascript、reactjs、react-hooks

从下面的代码片段可以看出，getInitialState是在每次渲染时执行的。即使从它返回的值仅在第一次渲染期间使用。我知道这是正常的Javascript行为。但是有没有办法使用React来避免这种情况呢？ .'); foo: 'bar' } const [myState,setMyState] = React.useState(getI

浏览 82提问于2019-09-25得票数 6

回答已采纳

1回答

function -我应该如何使用setter函数？

reactjs、typescript

基本情况const [valueOne, setValueOne] = useState(0);First wayincreaseOneSecondWay = useCallback(() => {}, [valueOne]); // has one dependency 在这里，由于我使用的是对于这样的基本回调，使用这两种方式似乎都不错。但如果事情

浏览 5提问于2022-02-02得票数 0

1回答

React错误:尝试使用按钮进行条件性渲染时，重新渲染过多

reactjs

当我尝试使用按钮进行条件渲染时，会发生这种情况，我该怎么办？href="#" className="btn btn-dark" onClick={() => setQajo(true)}>Request a quote</a> </> ) 我在开头有一个名为qajo的useState变量： const [qajo, setQajo] = useState

浏览 13提问于2021-03-16得票数 0

回答已采纳

2回答

有条件地显示除法反应

javascript、reactjs

对象"nextnode“是我每次动态创建节点时创建的。我想根据属性"form“是否设置为null来确定每个分区的显示值。

浏览 17提问于2021-04-19得票数 0

点击加载更多