当我将状态从true更改为false时，为什么我的模式不会隐藏在react中？
当你将状态从true更改为false时，模式不会隐藏在React中的原因可能是由于React的渲染机制和组件的更新方式。
在React中，当组件的状态发生变化时，React会重新渲染组件，并将新的状态应用到组件的UI上。这个过程是通过React的虚拟DOM（Virtual DOM）和Diff算法来实现的。
当你将状态从true更改为false时，React会检测到状态的变化，并触发组件的重新渲染。在重新渲染过程中，React会比较新旧状态的差异，并更新组件的UI。然而，如果你的模式没有正确隐藏，可能是因为以下几个原因：
- 组件的渲染逻辑问题：你可能没有正确地在组件的渲染逻辑中处理模式的显示与隐藏。你可以检查组件的render方法或JSX中的条件渲染逻辑，确保在状态为false时，模式被正确隐藏。
- 组件的更新方式问题：React组件的更新是基于浅比较的，即只有当组件的状态发生真正的变化时，才会触发重新渲染。如果你的状态是一个对象或数组，并且你只是修改了对象或数组的某个属性或元素，而没有创建一个新的对象或数组，那么React可能无法检测到状态的变化，从而导致模式没有正确隐藏。你可以尝试使用不可变数据结构来更新状态，或者使用setState的回调函数来确保状态的更新。
- 组件的生命周期问题：React组件的生命周期方法可以用来处理组件的更新逻辑。你可以检查组件的生命周期方法，例如componentDidUpdate，确保在状态变化时正确处理模式的显示与隐藏。
总之，要解决模式不会隐藏的问题，你需要仔细检查组件的渲染逻辑、更新方式和生命周期方法，确保在状态从true更改为false时，正确地隐藏模式。
相关·内容
2回答
import React from 'react'
import React from 'react'
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json';
import {ScreensLogin} from './Login'
test('render correctly', () => {
const state = {
email: '',
passwd: '
浏览 0提问于2019-01-20得票数 0
在下面的示例中，子组件上的display状态的值从不更新，即使show参数在true和false之间切换也是如此。
我希望它接收到值并进行相应的更新。有人能详细解释一下为什么这不起作用吗？
(我知道我可以在其中使用useEffect回调和setDisplay(显示)，但我想知道为什么像这样更简单的方法不起作用)
function Child({ show }) {
const [display] = React.useState(show);
console.log({ show, display });
return display ? "Message!" :
浏览 0提问于2020-07-25得票数 0
我有一个在React Native Modal中显示的WebView。我想隐藏一段时间的模态，在回调时，我想再次向用户显示一些输入的模态。 问题是，如果我更改状态并隐藏React Native模式，那么它将卸载具有WebView的子组件，如果我重新显示它，WebView将重新加载。 我只想隐藏模式，而不是杀死它，这样我就可以从用户离开的地方显示它。我尝试过React导航，但这也不能解决问题。 任何方向都会有帮助。
浏览 27提问于2020-01-15得票数 1
2回答
在输入元素时，我尝试实时更新p元素。下面的React代码工作得很好。但是，如果我从value元素中完全删除input属性，代码仍然有效！
class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
}
handleInput = (event) => {
this.setState({
浏览 3提问于2017-03-28得票数 1
回答已采纳
我对以下虚拟组件进行了一些测试，在执行过程中(在控制台中)，我得到了以下结果：
Rendering: 0
Triggered: 0
Rendering: 4
Triggered: 4
Rendering: 4
我很难理解为什么。
首次渲染：
将index设置为0。
运行useEffect，因为undefined不是0
useEffect请求将index设置为4
第二次渲染：
index是4
为什么useEffect身体会再次被执行？
第三次渲染：
为什么要重新渲染？
我期望的是：
Rendering: 0
Triggered: 0
浏览 1提问于2022-01-19得票数 2
回答已采纳
我使用公共类字段语法(handler = () => {...})来定义所有React的事件处理程序，这样我就可以对组件使用this，而无需在constructor中绑定它们。我想知道我是否也可以使用这个语法来使用React生命周期方法？以这样的方式使用componentWillMount：componentWillMount = () => {...}
如果用箭头函数定义react的生命周期方法，其利弊是什么？
浏览 0提问于2018-02-01得票数 5
回答已采纳
我正在尝试做一个时钟组件，简单地给出一个网页上的日期和时间的本地格式。我使用命令行npm i moment -- MomentJS在我的webpack环境中导入了保存。接下来，我在我的Clock.jsx组件中编写了这段代码(主要基于网站上的React示例)。
import React from 'react';
import Moment from 'moment';
export default class Clock extends React.Component {
constructor(props) {
super(props);
浏览 0提问于2016-01-06得票数 6
我是React和Redux的初学者。我将react 16.9与redux 4.0.4和react-redux 7.1.1一起使用。 我注意到我可以直接访问底层的Redux数据模型(存储中的对象)，而无需分派操作。 考虑以下组件： import React from 'react';
import { useSelector } from 'react-redux';
function MyComponent(props) {
const obj = useSelector(state => state.objReducer);
obj.
浏览 8提问于2019-09-23得票数 2
我刚刚开始真正摸索make的内部工作原理。然而，我不明白为什么以下方法不起作用：
test%: test%.foo
@echo $@
@echo $<
all: test1 test2
.PHONY: all test1 test2
预期行为：
$ make
test1
test1.foo
test2
test2.foo
# 1,2 Order not important
然而，我得到了：
$ make
make: Nothing to be done for `all'.
("make all“、"make test1”等没有区别)。
有
浏览 3提问于2011-10-25得票数 6
回答已采纳
我必须使用react和material进行应用程序，这是由以下组件组合而成的：
1- App.js
`
import './App.css';
import Header from './components/Header'
import ToDoApp from './components/ToDoApp';
function App() {
return (
<div className="App">
<Header />
<ToDoApp />
浏览 3提问于2022-11-08得票数 -1
我正在尝试做一个迷你的精灵宝可梦应用程序，同时学习react，它几乎完成了，但当我点击的时候，我应该会得到关于精灵精灵的详细信息到一个模式。但相反，我得到的所有模态的pokemons数据一个一个以上。我正在使用currentTarget，但是不能工作，并且不知道为什么。 我的代码： import { useState, useEffect } from 'react';
const useModal = (pokemon) => {
const [isShowing, setIsShowing] = useState(false);
const [onePokemon
浏览 11提问于2020-08-20得票数 0
回答已采纳
我正在学习React并使用文档中新实现的“钩子”。我在使用useEffect()函数的Modal (来自Material UI的对话框)和打开/关闭函数时遇到了问题。 我已经读过这两篇文章了：React.useState does not reload state from props和How to sync props to state using React hook : setState() 它已经帮助了我，我忘记了使用useEffect()函数，而只是从道具中设置useState。了解到useState将只执行一次来设置初始状态。但是我还有一个问题。 function AddItem
浏览 25提问于2019-05-28得票数 3
回答已采纳
我有以下内容：
import React from 'react';
import Header from './header.jsx';
import Footer from './footer.jsx';
class Wrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
};
}
toggleWrapper() {
this.setState({
浏览 0提问于2016-09-28得票数 1
回答已采纳
我有下面的代码，它是一个react组件，呈现一个巨大的组件。只要这个庞大的组件还没有完成渲染，就会显示一个加载指示器。
import * as React from "react";
import ReactDOM from "react-dom";
import {HUGEComponent} from "./huge.tsx";
class App extends React.Component<{}, {loading: boolean}> {
constructor(props: {}) {
super(pro
浏览 5提问于2019-03-10得票数 0
回答已采纳
我是React的新手，我正在使用React和Material-UI构建一个个人投资组合，作为我的第一个项目，使用我在过去几周中学到的知识。
当我尝试构建一个简单的切换器，在点击按钮时从右侧弹出一个侧面导航，我在React中得到了一个" error : too code renders“错误，并在Navbar.js中使用了以下相关代码：
// states
const [state, setState] = useState({
right: false
})
const toggleSlider = (open) => {
setState({right: ope
浏览 0提问于2020-07-28得票数 0
尝试使用钩子和导航头中的按钮来响应导航。
我可以将handleShowModalLogin函数传递给导航头，我可以看到按钮被点击了，但问题是setShowLoginModal没有将showLoginModal状态更新为true。不知道为什么这不管用。
import React, { useState, useEffect, useLayoutEffect } from "react";
import {
Image,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
B
浏览 0提问于2019-07-22得票数 1
回答已采纳
我对react和redux还是个新手。这对我来说是一个令人困惑的问题。有人能解释一下为什么我的searchTerm状态值在每次输入更改后打印两次(render方法被调用两次)。我读了react，了解到每次状态改变时，都会调用render，但在这个调用中，render会被调用两次？我是不是搞错了？
App.js
import React from 'react';
import Todos from './components/Todos';
import Header from './components/Header';
class A
浏览 3提问于2020-05-01得票数 2
我绝望地试图通过使用我的模态组件的onclick事件来使我的代码在两个组件之间工作，但是什么也没有发生。
如何使状态ShowModal的值工作？
Avaibalities组件
import React from 'react';
import Calendar from 'react-calendar';
import Modal from '../pages/Modal';
class Avaibalities extends React.Component {
state = {
date: new Date(),
sh
浏览 1提问于2021-02-23得票数 0
回答已采纳
我有以下代码。它使用的是较旧版本的React，但是为什么redux存储状态!!this.state.checked在render()中显示为false ...尽管defaultState是true index.js import ReactDOM from 'react-dom';
import React from 'react';
import { createStore } from 'redux';
const defaultState = { checked: true };
const reducer = (state = d
浏览 16提问于2020-11-05得票数 0
回答已采纳
1回答
当我将button的禁用功能从true改为false时，它破坏了我的onClick，为什么，以及如何解决它？
const Component = () => {
const refrence = React.useRef(null)
setTimeout(() => {
refrence.current.disabled = false
}, 1000);
const handleClick = () => console.log('clicked')
return (
<div>
<bu
浏览 2提问于2021-06-10得票数 1
回答已采纳
1回答
反应钩中的切换布尔状态
、、、、
当我运行以下代码并单击按钮时，我设法触发了useEffect函数：
const { useState, useEffect } = React;
const Example = () => {
const [bool, setBool] = useState(false);
useEffect(() => {
console.log(bool);
}, [bool]);
return (
<button
type='button'
onClick={() => {
setB
浏览 4提问于2021-09-30得票数 2
回答已采纳
2回答
我已经开发了一个包含三个div元素的react组件，如下所示。
render: function(){
return (
<div id="div_1">
<div id="div_2"></div>
<div>
Click the below button
<a href="#">Click here</a>
</div>
</div&g
浏览 0提问于2016-03-03得票数 1
2回答
每当我尝试在props更新后重定向时，我都会得到以下错误：
警告:无法对卸载的组件执行响应状态更新。这是一个非操作，但它表示您的应用程序中存在内存泄漏。若要修复，请取消useEffect清理函数中的所有订阅和异步任务。
已经试过了：
React.useEffect(() => {
if (props.user) {
props.history.push("/admin/me");
}
}, [props.user]);
而这个(直接在呈现方法中)：
if (props.user) {
return <Redirect
浏览 2提问于2019-03-29得票数 0
1回答
我正在努力学习react的useEffect清理。
我看到了这个关于如何使用清理的例子。(参考：)。
const [data, setData] = useState({})
useEffect(() => {
// set our variable to true
let isApiSubscribed = true;
axios.get(API).then((res) => {
if (isApiSubscribed) {
// handle success
setData(res.dat
浏览 1提问于2022-06-24得票数 2
回答已采纳
我得到了一些意想不到的结果。看看这个 import React from 'react';
import PropTypes from 'prop-types';
const propTypes = {
fooList: PropTypes.array
};
const defaultProps = {
fooList: [
{ active: false },
{ active: false }
];
};
const FooBar = ({
fooList
}) => {
const
浏览 11提问于2019-09-10得票数 1
回答已采纳
2回答
我在项目中使用Material组件，并在我的应用程序中使用AutoComplete组件。
在Material团队的示例中，我看到了一个有趣的AutoComplete Ajax数据示例：。
他们使用从服务器获取数据：
React.useEffect(() => {
let active = true;
if (!loading) {
return undefined;
}
(async () => {
const response = await fetch('https://country.register.gov
浏览 1提问于2020-06-18得票数 2
回答已采纳
2回答
我已经创建了一个类组件，如代码中所示。
index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import Home from "./components/home";
ReactDOM.render(
<React.StrictMode>
<Home /&
浏览 1提问于2020-05-10得票数 2
回答已采纳
我有以下使用om库作为React.js包装器的ClojureScript代码
(defn list-view [app owner]
(reify
om/IInitState
(init-state [_]
{:filter nil
:selected-domain nil})
om/IWillMount
(will-mount [_]
(th/poll filter-chan (fn[data]
(om/set-state! owner :filter dat
浏览 1提问于2014-04-30得票数 1
有点JavaScript/react的新手。 只是目前在基本的react/JavaScript语法上有点卡住了，这就是我试图实现的： import axios from 'axios';
import React, { useState, useEffect, useMemo } from "react";
const testCombineApi = () => {
const [assocs, setAssocs] = useState([])
const [loadingData, setLoadingData] = useSta
浏览 40提问于2021-08-06得票数 0
我用react native编写了函数组件。但是我遇到了麻烦，因为一个奇怪的问题，似乎是一个bug。 我的目的是改变react函数组件中的变量，但变量没有改变。 --我知道可以通过将let isDirty更改为cosnt [isDirty,setIsDirty] = useState(false)来解决 为什么当handleTitleChange事件发生时，"isDirty“没有改变？ 在纯js中，它工作得非常好。 update.tsx import React, { useState } from 'react';
import { View, TextInput,
浏览 65提问于2019-10-11得票数 2
当导航到下一个屏幕"unmount“时，我看到一个屏幕，我想要将状态重置为初始值，但由于某些原因，它不再被触发
我使用了一个单独的useEffect来进行清理，但是我没有想到这个问题！
代码片段
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
const [selectedItem, setSelectedItem] = useState<Service | undefined>(
undefined,
);
const [isOpen, s
浏览 0提问于2021-01-31得票数 1
(使用Django 1.11.5)
传统上，我总是创建这样一个模型：
class Animal(models.Model):
is_hungry = models.BooleanField(default=True)
然后做出如下改变：
animal = Animal()
animal.save()
animal.is_hungry = True
animal.save()
最近，我看到一个朋友用自定义保存方法定义了一个模型：
class Animal(models.Model):
is_hungry = models.BooleanField(default=True)
浏览 2提问于2017-09-12得票数 8
回答已采纳
我在这个小小的测试组件上有问题，我在这里遗漏了什么？这只是一个简单的小挑逗问题，似乎地图是哪里打破的。我不知道我是不是不正确地传递值什么的
import React from "react";
export default function App() {
const [state, setState] = React.useState({
input: "",
items: [],
error: false
});
const { input, items, error } = state;
const chang
浏览 1提问于2022-01-24得票数 1
我正在学习在ReactNative中设置时间。我能够设置onConfirm进程的DateTimePickerModal的时间，但我在关闭DateTimePicker时遇到了困难。
这是消息来源。
import React, {Component} from 'react';
import{
Text,
View,
Button,
}from 'react-native';
//import DateTimePicker from '@react-native- community/datetimepicker';
import
浏览 1提问于2021-05-04得票数 0
回答已采纳
我很好奇为什么有这么多程序员单独导入useState。 import React, { useState } from 'react';
const [foo, setFoo] = useState('foo'); 然而，在内存中导入react并执行React.useState不是更容易吗 import React from 'react';
const [foo, setFoo] = React.useState('foo');
浏览 44提问于2020-09-09得票数 2
回答已采纳
1回答
我不知道如何让我的应用程序工作。我有一个组件ContactAdd，onClick必须呈现组件ModalWindow。ModalWindow有一个参数isOpened={this.state.open}。如何从父组件控制这种状态？
import React from 'react';
import ContactAddModal from './ContactAddModal.jsx';
import './ContactAdd.css';
export default class ContactAdd extends React.Compo
浏览 0提问于2017-11-04得票数 0
我读到过关于过度使用noexcept可能会妨碍可测试库的担忧。
考虑：
T& vector::front() noexcept {
assert(!empty()); // <- this may throw in some test-frameworks
return data[0];
}
使用带有noexcept的注释，编译器可以优化异常代码输出，这将/可能妨碍正确处理assert() (或作者希望在这里用于测试的任何函数)。
因此，我想知道，在一个库中，不使用无条件的noexcept，而是始终将其与测试条件中的am-i连接起来，在库中使用是否
浏览 4提问于2011-09-10得票数 6
回答已采纳
2回答
我知道如何使用react组件中的函数来获取我的后端，但我需要一个下拉菜单，所以我在react-select页面中找到了一个示例，但该示例是在类中创建的。 我在互联网上找到的干净的例子是，对于导入react-select，有必要运行npm install react-select命令 import React, { Component, Fragment, useEffect } from "react";
import Select from "react-select";
const options = [
{ value: "red"
浏览 15提问于2021-05-09得票数 0
回答已采纳
1回答
我下载了一个关于Gatsby和样式组件的优秀教程。本教程有一个桌面优先的方法。
我正在尝试从桌面优先转换到移动优先，桌面优先的版本可以正常工作，但我的移动优先转换不起作用。
这是Navbar.jsx文件；我相信这个文件不需要修改。
import React from 'react';
import styled from 'styled-components';
import Burger from './Burger';
const Nav = styled.nav`
width: 100%;
height: 55px;
bord
浏览 0提问于2020-08-06得票数 0
import React, { useState, useEffect } from "react";
function App() {
const [count, setCount] = useState(60);
console.log("useEffect before", count);
useEffect(() => {
console.log("useEffect", count);
const timeId = setInterval(() => {
浏览 7提问于2022-06-30得票数 0
我只想在单击时显示infoWindow。 我使用useState来更新值，以检查是否单击了标记以显示InfoWindow，否则不显示InfoWindow。 我的代码： import React, { useState } from "react";
import {
GoogleMap,
useLoadScript,
Marker,
InfoWindow,
} from "@react-google-maps/api";
import "./App.css";
import mapStyles from "./mapSt
浏览 46提问于2020-07-23得票数 0
回答已采纳
我正在学习react.js
工作示例如下所示：
代码如下
<!DOCTYPE HTML>
<html>
<head>
<title>React Template</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type="text/css">
.my
浏览 0提问于2017-09-11得票数 0
1回答
当我按下submit按钮时，模式会向上滑动，但当我按下"Hide Modal“时，它不会回滚到它的原点。在onPress回调之后，我在控制台上记录了ChildScreen.js文件，并得到：
Object { "modalVisible"：false，}
这意味着模式必须回滚到其原始位置，但这不会发生！有人知道为什么吗？注意:当我不导入的时候，模式就能完美的工作！
ParentScreen.js
import React from "react";
import { View, Text, Modal } from "react-native
浏览 1提问于2017-08-20得票数 0
让我们考虑以下情况：
有一个带有Input和Button的页面来打开一个模态。
在该模型中，还有另一个Button来关闭该模式、聚焦Input和显示Keyboard。
问题：
在按下另一个Button关闭模态、聚焦Input并显示Keyboard之后，会发生以下情况：
模态关闭了。
Input有焦点。
但Keyboard是而不是显示的。
这是我的密码：
import React, { useState, useEffect, useRef } from 'react';
import { View } from 'react-native';
浏览 15提问于2020-04-11得票数 0
回答已采纳
我注意到react项目往往是这样组织的，
/src
/actions
userActions.js
settingsActions.js
/components
userComponent.js
settingsComponent.js
/containers
userContainer.js
settingsContainer.js
/reducers
userReducers.js
settingsReducers.js
结合类型而不是像这样的功能，
/src
/user
浏览 2提问于2018-02-05得票数 0
3回答
溅屏反应
、
我正在启动一个应用程序，目前我有两个视图，一个叫做Splash，另一个叫做Home。当启动结束时，它会引导我到Home视图，但是在这个视图中，用户向后按下按钮，应用程序再次向我显示启动。有什么办法可以避免这种情况吗？其想法是，在Home视图中，没有办法回滚应用程序。
MainStackNavigator.js
import * as React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } fr
浏览 3提问于2020-11-02得票数 5
回答已采纳
在React中，我似乎可以声明一个函数组件，或者仅仅是一个函数返回一个JSX元素。让我困惑的是，我不知道这两种方法之间的关键区别。是否存在只有一种方法可以做而另一种方法不能做的事情？
import React from "react";
type ItemProps = {
id: number
name: string
}
const Item: React.FC<ItemProps> = ({ id, name }) =>
(
<section>
my id is {id}
浏览 0提问于2019-11-01得票数 12
3回答
上下文：--我想创建一个允许用户填写表单并提交它的模式。在POST请求完成后，模式应该关闭。有多个模式具有相似的行为，但形式不同的内容，所以我需要使它可重用。表单中的数据不在前端应用程序的其他地方使用，只存储在后端。
相关技术栈： react，redux，react redux，redux-saga，无SSR
选项1:在redux中存储模式和请求状态
开启和提交模式将触发以下一系列事件：
开启模态的调度动作
用数据提交表单的发送操作
发送POST请求提交表单，将redux加载状态设置为true
如果成功，将redux加载状态设置为false，将“模式打开”状态设置为false。
浏览 10提问于2020-06-06得票数 1
回答已采纳
import React,{useState} from "react"
const Pagination = ()=>{
const [pageCount, setPageCount] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(10);
const [itemOffset, setItemOffset] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [data, se
浏览 6提问于2022-09-03得票数 0
1回答
我对道具如何与由钩子创建的状态交互有一个问题。
在下面的示例中，钩子中保持的状态总是在道具中定义的状态后面。
我想我理解为什么会发生这种事。生命周期似乎是这样的：
组件呈现
handleClick是通过访问基于此呈现的范围来定义的。
按钮被单击并调用handleClick。
handleClick仍然只能访问呈现中定义的作用域，因此，items仍然是空的。
调用add；更新父组件中的状态，但setHookItems将使用定义handleClick时在道具中定义的状态。
hookItems被设置为items，它是空的
这是用于第一次呈现，但我认为这个原则适用于所有
浏览 0提问于2019-11-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
