我有两个部件，一个放在另一个里面。子组件打印父组件传递的状态，并使用useEffect更新状态一次。在父组件中，我使用setState (一个具有布尔值的对象)并将状态传递给所有子组件。
父组件：
export default function App() {
const [state, setState] = useState({
one: false,
two: false,
three: false
});
return (
<div className="App">
<h1>Hello Co
浏览 4提问于2021-08-02得票数 3
回答已采纳
我有主组件以及使用useState和useRef的本地状态，我也有另一个自定义钩子，在自定义钩子内，我想重置我的主组件的状态和引用，我做的正确吗？
// custom hook
const useLoadData = ({startLoad, setStartLoad, setLoadCompleted, setUserNameRef}) => {
useEffect(() => {
const fetchUser = async() => { await fetchFromApi(...); return userName;};
if (
浏览 5提问于2020-08-04得票数 0
在我的React应用程序中，我遇到了一些奇怪的行为，其中setEffect的状态(比如state1)作为第二个参数，在没有调用setState1的情况下改变了另一个变量(而不是状态)。因此，我编写了以下代码，以查看是否会发生相同的情况，并做到了：
import React, { useState, useEffect } from 'react';
function App() {
let [state1, setState1] = useState('');
let count = 0;
useEffect(() => {
co
浏览 1提问于2020-09-25得票数 2
回答已采纳
1回答
我有一个屏幕，上面有一些选项。如果选择该选项，则会设置数据的状态。然后我就有了一个确认按钮。如果用户点击确认，我会进行一个异步调用来获取一些额外的数据。我想在打开模式之前等待它发生，因为我需要在我的模式中呈现额外的数据。
在钩子之前，我会使用setState并执行类似于：this.setState({data: myData}, () => this.openModal())的操作，因为这样可以可靠地设置状态，然后打开模式。网上的所有答案似乎都建议使用useEffect，但这样做似乎不太可靠：
useEffect(() => {
if (data) {
se
浏览 0提问于2021-02-20得票数 1
我在使用一个setstate调用useEffect时遇到了一些小问题，我把它作为一个子组件的一个支柱。我不知道这是怎么做的。
代码是这样的：
const Parent = () => {
const [state, setState] = useState()
useEffect(() => {
console.log ('state updated');
}, [state])
return (
<>
<Child state={state} setState = {setState}/>
</>
浏览 4提问于2021-12-26得票数 0
我刚看到这段代码：
const defaultState = { // some object };
const SomeComponent = ({
complete
}) => {
const [state, setState] = useState(defaultState);
const {
color,
icon
} = state;
useEffect(() => {
if (complete) {
setState({
...state,
color: '#61a60e
浏览 1提问于2021-04-19得票数 1
回答已采纳
2回答
我正在查看的实现，看起来useState的setState和useReducer的dispatch函数都是静态引用，它们不需要在useEffect的依赖数组中声明。
但是，当您编写抽象内部逻辑的自定义规则时，此规则似乎无法正常工作。例如，我创建一个自定义钩子：
const useCustom = () => {
const [number, setNumber] = React.useState(0);
return [number, setNumber];
};
然后以下列方式使用：
const [number, setNumber] = useCustom();
Re
浏览 4提问于2020-03-25得票数 2
回答已采纳
2回答
我需要用一个从setState中获取的对象来实现redux store。问题是，当我在组件中调用setState时，我将得到undefined。知道如何用获取的数据来设置状态的默认值吗？
这是我的组成部分：
import React, { useEffect, Fragment, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
const contactDetails = useSelector((state) => state.contac
浏览 5提问于2022-02-06得票数 1
回答已采纳
我有一个名为ListChats的react组件和另一个名为Chat的组件。
ListChats调用聊天的呈现
我需要的是，如果在呈现聊天时出现错误，ListChats会知道并返回可用聊天列表。
一个可能的错误，它的捕获尚未实现，将是如果用户没有名称，聊天捕获此错误并返回到ListChat。
ListChats组件：
import React, { Component } from "react";
import Chat from "../Chat";
import { Button } from 'react-bootstrap';
exp
浏览 3提问于2021-02-16得票数 1
以下代码的目标是在表中呈现从可观察对象接收的报价。我有两个版本的代码，一个是使用钩子和useEffect的react函数，另一个是使用setState、componentDidMount和componentWillUnmount的react类。使用react函数时，根本不会显示引号。使用react类，该表将不断更新。如果我在函数上做错了什么，那是什么呢？如果我正确地使用它，那么钩子和useEffect之间的区别是它不能工作，componentDidMount/ work卸载它能工作吗？ 功能： function DisplayQuotes() {
const [storedQuotes,
浏览 60提问于2020-06-19得票数 0
1回答
我的应用程序中有些部分必须同步工作。我用的是作架。问题是祖站的setState函数是异步工作的。请告诉我是否还有其他库支持同步状态更改或任何技巧。
App.js (react示例)
// in real
import create from 'zustand'
import logo from './logo.svg';
import React, { useEffect } from 'react';
const useStore = create(() => ({
counter: 0
}))
function App() {
浏览 5提问于2022-05-18得票数 0
基本上，我想使用方法的，但我不能设法在一个功能组件内设置ref。
注意:对于下面的例子，SectionList的强制属性被省略，以提高清晰度。
我试过使用useRef，但这不起作用，3秒后ref仍然是null。
const MyComponent = () => {
const ref = React.useRef()
React.useEffect(() =>
setTimeout(() => ref.scrollToLocation({itemIndex: 0, sectionIndex: 0}, 3000)
)
return (
<
浏览 9提问于2021-02-03得票数 0
回答已采纳
我想问一下下面使用回调函数的方法是否正确。我觉得我从Class切换到Hooks的回调函数不像预期的那样工作。
中的类
componentWillReceiveProps(nextProps) {
if (typeof nextProps.checked != 'undefined' && nextProps.checked != this.state.checked) {
this.setState({checked: nextProps.checked});
}
}
onClick = () => {
var self=this;
浏览 0提问于2021-08-13得票数 0
所以我有两个单选按钮图像，一个检查了，另一个没有。我试图持久化状态的改变，以查看相应的图像按钮，点击每个输入。请帮帮忙。这是我的密码：
import React, { useState, useEffect } from 'react';
const Option = (props) => {
const img1 = <img alt='' src='/radio-active.png' className='radio__img' />;
const img2 = <img alt=''
浏览 11提问于2022-01-03得票数 0
回答已采纳
1回答
我只是个反应新手。我正在尝试创建一个自定义钩子，一旦一个onClick事件被触发，它就会被触发。据我所见，我需要使用useRef钩子，以考虑组件是第一次呈现，还是正在重新呈现。
下面是我的代码方法：
const Clear = (value) => {
const useClearHook = () => {
const stateRef = useRef(value.value.state);
console.log(stateRef);
useEffect(() => {
console.lo
浏览 9提问于2022-03-15得票数 0
1回答
我建立了一个数量越来越多的简单国家。当URL的参数被更改时，我想初始化状态，但是当我尝试这样做时，呈现首先运行，而状态没有初始化。我检查了console.log，发现即使我在useEffect中执行setState，值也不会更改。请告诉我如何初始化加斯比州。
示例
https://example.com?name=john => https://example.com?name=kid
import { useLocation } from "@reach/router";
import React, { useEffect, useState } from "r
浏览 2提问于2022-11-07得票数 0
4回答
我正在学习React，但是我无法理解为什么我在控制台中得到了这个输出。心地善良的人可以详细解释一下“行刑”哦，这些钩子？
import { useState, useEffect } from "react";
function Homepage() {
const [state, setState] = useState();
useEffect(() => {
console.log("useEffect");
console.log("useEffect not executed");
setState
浏览 24提问于2022-04-20得票数 1
1回答
这是上下文
我正在从另一个组件调用函数invoked(..)。在invoked i setState内部，但是状态没有设置。它不触发useEffect，也不接受useInterval中更新的值。
下面是密码。
组件1= exampleComp.ts
const exampleComp = ({initValue: ExampleProps}) {
const [params, setParams] = useState<{field1: null | string}> ({field1: null});
const invoked = (x: string) =>
浏览 1提问于2022-03-15得票数 0
我正在尝试将我的代码迁移到支持react钩子的新react。我使用的是useReducer、useState和useEffect。我可以在代码中使用DidMount和UnMount，但不知道如何实现DidUpdate部件，因为这可能会造成重新呈现问题。 我是这样做的： 旧代码 class ImageBoard extends React.Component {
constructor() {
super();
this.state = {
canvas: undefined,
selected: undefined
浏览 54提问于2019-01-20得票数 3
回答已采纳
我有一个使用redux和钩子的反应性无状态组件。我需要显示页面加载(useEffect)上的项目数，并在每次添加或删除项(store.subscribe)时更新它。
useEffect(() => {
setState({
items: store.getState().items.length
});
}, []);
store.subscribe(() => {
setState({
items: store.getState().items.length
});
});
但这会导致控制台显示警告，无法对未挂载的
浏览 13提问于2019-11-25得票数 7
回答已采纳
你好，我现在正试着调试一些代码，不知道如何修复我的标题中用于检测屏幕大小视图的useEffect。下面是我在useEffect中遇到的错误：
无法对未挂载的组件执行反应状态更新。这是一个非操作，但它表示您的应用程序中存在内存泄漏。
我的代码：
const [state, setState] = useState({
mobileView: false,
drawerOpen: false,
});
const { mobileView, drawerOpen } = state;
useEffect(() =>
{
const setResponsivene
浏览 2提问于2021-04-05得票数 2
回答已采纳
我理解，没有依赖项，您就无法访问useEffect中的状态。一个这样的例子：
const [state, setState] = React.useState('')
const ws = new WebSocket(`ws://localhost:5000`)
React.useEffect(() => {
ws.onopen = () => {
console.log(state)
},[])
在本例中，state返回为空，尽管它在代码的其他部分中发生了更改。为了从原则上解决这个问题，我应该将state作为依赖项添加到useEffec
浏览 5提问于2022-01-19得票数 0
因此，有时我在if语句中使用setState，以确保它不会不必要地运行。它起作用了，我从不出错。我理解在这种情况下，useEffect是如何帮助防止额外的重新呈现的，但是我的问题是，当在JSX之外使用"useState“时，useEffect总是需要的吗？例如，在程序意义上，如下面所示，技术上有一个不可靠的条件，可以阻止无限循环？
import { useEffect, useState } from "react";
import "./styles.css";
import Item from "./Item";
// EXAMPL
浏览 3提问于2022-09-01得票数 0
回答已采纳
2回答
有人能解释一下为什么这会触发useEffect吗？setState钩子中的useState函数似乎总是一个函数。它在任何时候都不是undefined (初始化时)吗？
const [state, setState] = useState(0)
useEffect(() => {console.log('triggers')}, [setState])
我离开了反应18s安装/卸载的警告，但是既然setState从来不改变效果，就不应该开火吗？我在这里错过了什么？
以上代码与编写以下代码基本相同：
useEffect(() => {...}, [])
浏览 7提问于2022-10-05得票数 1
回答已采纳
2回答
假设我有一个简单的虚拟组件：
const Component = () => {
const [state, setState] = useState(1);
setState(1);
return <div>Component</div>
}
在这段代码中，我将状态更新为，与前面直接在组件体中的值相同。但是，即使值保持不变，这也会导致太多的重呈现。
正如我所知，在React.useState中，如果状态值被更新为与前面相同的值- React将不会重新呈现组件。为什么会发生在这里？
然而，，如果我尝试使用useEffect做一些简单的事情，而不是
浏览 14提问于2022-10-11得票数 7
回答已采纳
我对这个现象很好奇。我使用useEffect服务器时间，并使用setState其他值。但它只在控制台上被射中了两次。useEffect很多调用，但只有两次在控制台上。任何知道原因的人，请帮助..。
import { useEffect, useState } from 'react';
function Test() {
const [value, setValue] = useState(0);
useEffect(() => {
setValue(prev => prev + 1)
}, [])
useEffect(() =>
浏览 2提问于2021-06-08得票数 1
回答已采纳
学习通过编码来反应，我有这个错误，这是因为‘调度(clearAnalyserData()；’‘在'setFilteredGraphData’中，在同一个useEffect中我使用了两次'clearAnalyserData‘，但是第二个很好，并且没有出现错误。我做错了什么，在“setFilteredGraphData”中有什么不发送的规则吗？
Warning: Cannot update a component (ConnectedNavBar) while rendering a different component (ConnectedGraphs). To locate
浏览 5提问于2022-08-21得票数 0
我可以找到类似的问题被问了几十次，但所提供的解决方案对我不起作用。我有一个useEffect钩子，它运行一个函数从我的数据库返回一些数据。
const VenueDetails = ({ venue_details, fetchVenueDetails, id }) => {
React.useEffect(() => {
fetchVenueDetails(id);
}, [venue_details]);
return (<div></div>)
}
id是从我的url <VenueDetails path="/venu
浏览 0提问于2020-12-01得票数 0
回答已采纳
我正在做一个股票组合项目使用盖茨比和股票市场API。当前，当您按一个代码号进行搜索时，它会返回一个表中的代码--代码、市值和先前的关闭。当您单击返回的滴答符号时，它会将您带到另一页。在下一页中，我希望访问相同的API搜索，以显示股票的更多细节。
昨晚我在StackOverflow上被告知，我可以通过链接发送API数据，但是在查看了一些文档之后，我不知道如何具体实现我所描述的内容。
我不介意将details.js转换为类组件，我之前尝试过这样做，并设置了状态，但我只是遇到了大量不同的错误。
index.js
import React from "react"
import { L
浏览 0提问于2020-06-17得票数 0
回答已采纳
如果第二个setState钩子依赖于您，那么如何实现这个简单的逻辑？在本例中，第一个setState值在运行第二个setState之前更新不够快。我已经尝试过将第二个超时，以及将其放入第一个回调函数中。没能成功。useEffect可能会解决这个问题，但在这个特殊的例子中，我只需要在第一个实例中调用useEffect，而不是每次状态发生更改时都调用useEffect。告诉我你的想法。
function blah(arg) {
if (condition) {
setState(arg)
}
setState(state + 1)
}
浏览 3提问于2022-01-11得票数 0
回答已采纳
由于我正在处理的应用程序的体系结构，我需要访问另一个子组件中的一个子组件的状态，并且我不能将这些状态带到父组件或使用react-redux。因此，我使用了一种技术，将指向目标子对象的状态的指针存储在父对象中。在parent中，我为指针创建了状态： export default function App() {
const [compOneStatePointers, setCompOneStatePointers] = useState({});
return (
<div className="App">
<CompOne setC
浏览 22提问于2020-09-07得票数 2
setState异步更新状态。我的理解是，在使用类组件时，您可以这样做，以确保在一个setState更新状态之后执行某些代码：
setState({color: red}, callbackThatExecutesAfterStateIsChanged);
我使用的是一个功能组件&钩子。我知道，在这里，useEffect()的回调将在状态更改之后和初始执行时每次执行时执行。
useEffect(callback, [color]);
如何复制类组件示例中类似的行为？？即，在one setState()成功地更改状态而不是在初始执行之后，在one setState()成功地更改状态之后，
浏览 3提问于2020-11-30得票数 2
1回答
我想实现子程序的排序功能，其中道具是通过一个axios调用从父函数传入的--我应该吗？
在子useState中存储道具
从道具传入父setState来实现这一点？
假设我不需要父母重新排序，我的想法是1可能更有利-只是我不确定在setState中存储道具是一种常见的模式。
第一个案例() -在子useState中存储道具
父母jsx
import { useEffect, useRef, useState } from "react";
import "./styles.css";
import Child from "./Child&#
浏览 4提问于2022-05-22得票数 0
我试图理解在react中基于类的组件。我偶然发现了这些生命周期方法。我只是想了解一下componentDidUpdate()
据我所知，只有在this.setState被调用时，react组件才会重新呈现。因此，理想情况下，只有在触发某些componentDidUpdate时才会调用setState？
此外，请纠正我的理解，如下所述：
componentDidUpdate()不同于useEffect()，因为如果更改了依赖数组的任何元素，useEffect就会自动重新呈现，但是componentDidUpdate可能永远不会单独触发呈现(除非我们在其中调用this.setState() )。
浏览 22提问于2021-09-28得票数 1
回答已采纳
3回答
我看到了react v16中引入的这两个新概念。
根据我的理解：
useState类似于带有钩子的setState，useEffect的工作方式类似于生命周期方法。
我的理解正确吗？如果不是，useState和useEffect的确切区别是什么？
浏览 0提问于2018-11-09得票数 39
回答已采纳
2回答
我对此反应很新，所以我仍然对组件的生命周期感到困惑。但这个问题让我抓狂了。
例如，我不明白为什么添加"setState(10);“会导致"Test”组件的样式恢复到它的默认值，而<div ref={ref2}>Hi</div>则保持它的样式。(见下图)
我知道"setState(10);“会导致重呈现，但是为什么要还原"Test”组件的样式呢？
另外，请忽略调用setState(10)的“实际用途”--我知道它是没有意义的，因为它从未被使用过，而且我知道使用"state“作为UseEffect依赖项可以解决这个问题。但是我的主要问
浏览 4提问于2022-02-27得票数 1
回答已采纳
我有两个useEffect挂钩，它们都将在startTime/endTime状态的变化中运行。
useEffect(() => {
if (selectedProduct) {
fetch(...)
.then(res => res.json())
.then(res => setMyState(res.data));
}
}, [selectedProduct, startTime, endTime]);
useEffect(() => {
if(selectedStep){
c
浏览 2提问于2021-05-19得票数 0
回答已采纳
我已经使用新的反应挂钩近4个月，这是一个伟大的调整创建反应组件。目前，我正试图从类组件迁移到功能组件，并存在一些问题。例如，让我们讨论这种情况，并比较函数和类组件，以更好地理解这个问题。
class UserInformation extends React.Component {
state = {
isBusy: false,
};
updateImage = (uploadedImageData: IUploadImage): void => {
const imageData = {
ImageDa
浏览 4提问于2020-03-11得票数 0
我的react应用程序中有下一个组件：
import React, { useEffect, useState } from "react";
import AsyncSelect from "react-select/async";
import { ColourOption, colourOptions } from "./docs/data";
const App = () => {
const [state, setState] = useState([]);
useEffect(() => {
set
浏览 9提问于2021-12-14得票数 0
在卸载异步clickHandler中的组件后调用clickHandler时，会在控制台中引发警告：
Warning: Can't perform a React state update on an unmounted component.
请参阅
function App() {
const [show, setShow] = useState(true)
return {show && <Button
text="Click to remove"
clickHandler={() => se
浏览 0提问于2019-06-26得票数 2
回答已采纳
2回答
我有一个基于选项卡的页面。每个选项卡都会带有标签，以便在单击时切换选项卡。我在该州的setValue中添加了useEffect。 PageManager文件： const RolePageManager = () => {
let location = useLocation()
let { uuid } = useParams()
const [tabIndex, setTabIndex] = useState(0)
useEffect(() => {
if (location.hash) {
switch (location.hash) {
case &
浏览 29提问于2020-08-06得票数 0
1回答
我有一个场景，我被迫调用触发器方法来显示来自两个不同地方的模式，一个是使用热键组合，另一个是单击工具栏按钮。为了做到这一点，我有下面的代码，其中我调用triggerCustomLinkModal来设置状态，但是我会被Invalid Hook call error击中。
import { useState, useCallback, useEffect } from "react"
import { Dialog } from "@blueprintjs/core"
const useLocalState = () => {
const [isShow
浏览 6提问于2022-06-22得票数 0
我正在使用next.js构建一个项目，但是当呈现页面时，getServerSideProps被调用了6次。
下面是页面顶部的代码。
const NewFindstay: React.FC<INewFindstayProps> = ({ findstayList }) => {
const [isMap, setIsMap] = useState(false);
return (
<div id="contents">
<FindstayFilter setIsMap={setIsMap} isMap={isMap}
浏览 8提问于2020-12-08得票数 1
回答已采纳
我重构代码以使用useEffect钩子，而不是使用类，但是在刷新结果时出现了内存泄漏。我确实使用了useEffect，但仍然收到一条错误消息，不知道我的代码在哪里出错。
我得到以下错误：
警告:来自useState()和useReducer()钩子的状态更新不支持第二个回调参数。若要在呈现后执行副作用，请使用useEffect()在组件体中声明它。
import React, { useEffect, useState} from 'react';
import { FlatList, View, TouchableHighlight } from &
浏览 2提问于2020-05-16得票数 0
回答已采纳
当oldRunIn为undefined时，以下代码的输出与触发效果时所期望的一样：
效果正在运行
setState正在运行
但是，下次useEffect使用定义的状态变量runInArrow (在setState函数中称为oldRunInArrow )运行时，输出是：
效果正在运行
setState正在运行
setState正在运行
setState正在运行
怎么可能效果只运行一次而setState运行3次呢？
const [runInArrow, setRunInArrow] = useState<mapkit.PolylineOverlay[] | undefined
浏览 6提问于2020-02-19得票数 3
回答已采纳
要求：我必须用2种不同的颜色(除了红色和白色)眨眼2秒。我可以用这个代码-
const [state, setState] = React.useState(false)
const [initialState, setInitialState] = React.useState(0)
React.useEffect(() => {
if (initialState < 2){
let interval = setInterval(() => {
setState(true)
浏览 1提问于2021-09-14得票数 0
import React, {useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
function AppTwo(props){
const [state, setState] = React.useState("initial value");
useEffect(() => {
console.log(`useE
浏览 7提问于2022-01-17得票数 1
回答已采纳
6回答
目前，我正在使用带有react钩子的功能组件。但是我无法完全测试useState钩子。考虑这样的场景，在useEffect钩子中，我正在做一个API调用并在useState中设置值。对于jest /酶，我有要测试的模拟数据，但我无法为jest中的useState设置初始状态值。
const [state, setState] = useState([]);
我想在jest中将初始状态设置为对象数组。我找不到任何类似于类组件的setState函数。
浏览 7提问于2019-07-14得票数 34
1回答
请帮帮我
我需要像这样在doSomeFunction()之后调用一个函数，所以只有在设置状态之后，setState才能工作。
function sth() {
setState(something)
doSomeFunction()
}
不使用 useEffect
浏览 1提问于2020-11-26得票数 1
回答已采纳
我在一个react应用程序中有两个不同类的组件。我需要通过单击另一个类中的按钮来调用另一个类中的函数。
changeTitle () {
this.setState({header: 'New title' });
}
我尝试使用import。
import Material from './Material'
<Link to="/Material">
<button className='button' id='button-1' />
<label className
浏览 3提问于2018-10-04得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
