如何映射已在useEffect挂钩中设置的属性数组
在React的函数组件中，可以使用useEffect挂钩来处理副作用，比如订阅事件、请求数据等。当在useEffect的依赖数组中传入一个属性数组时，React会在每次渲染时，检查这个属性数组的值是否发生了变化。如果发生了变化，useEffect内的回调函数会被触发。
要映射已在useEffect挂钩中设置的属性数组，可以按照以下步骤进行操作：
- 首先，在函数组件中使用
useEffect挂钩，并将属性数组作为依赖传入。例如：
useEffect(() => {
// 这里是回调函数
// 在每次渲染时触发
}, [属性数组]);- 然后，在回调函数中，可以通过访问属性数组的值来执行相应的操作。例如：
useEffect(() => {
// 属性数组发生变化时触发的逻辑
// 可以通过属性数组的值执行相应的操作
console.log(属性数组);
// 其他操作...
}, [属性数组]);通过上述步骤，我们可以在useEffect挂钩中设置属性数组，并在回调函数中映射该属性数组的值，以执行相应的操作。
需要注意的是，属性数组的值发生变化时，React会重新渲染组件并触发useEffect的回调函数。因此，确保在回调函数中处理逻辑时，不会产生额外的副作用或导致重复请求等问题。
以上是关于如何映射已在useEffect挂钩中设置的属性数组的解释和示例。如果您需要了解更多关于React的相关知识，请参考腾讯云提供的React产品和文档：
注意：本回答仅供参考，推荐的腾讯云产品仅作为示例，并非对其他品牌商的评价或推荐。
相关·内容
1回答
我在一个组件中多次调用useEffect钩子
useEffect(() => {
getData(id);
}, [getData, id]);
const reqBody = useMemo(
() => ({
item: data?.item,
}), [data?.item]
);
useEffect(() => {
if (data?.item) {
getAnotherData(reqBody);
}
}, [getAnotherData]);
如代码片段所示，第一个useEffect钩子调用一个名为getData的函数，该函
浏览 10提问于2021-05-31得票数 0
1回答
当我执行console.log(dbdata.user)时，它返回： createdAt: "2020-11-17T04:32:17.934Z"
date: "2020-11-17T04:32:17.931Z"
displayname: "Batman"
followers: ["5fbb3879e8902d14f8c60448"]
updatedAt: "2020-12-02T14:58:17.880Z"
__v: 0
_id: "5fb35251888e8d081c06a7fa"
__prot
浏览 15提问于2020-12-02得票数 0
1回答
问题:在启动时，在显示启动屏幕后，列表屏幕显示所有用户。当首次加载应用程序时，将调用useEffect()，但状态更新不会导致重发。但是，只有在启动时才会发生这种情况，如果我在另一个屏幕上导航并返回到它，那么每一件事情都会发生。
const fetch = async () => {
useStore.setState({ allUsers: await getAllUsers() });
};
useEffect(() => {
fetch();
}, []);
我的作品店的定义如下：
type Store = {
allUsers: User[];
浏览 5提问于2022-08-16得票数 0
1回答
我正在使用react.js，我有以下代码。 function App() {
let Submitable;
const [values, setValues] = useState([])
//...
onTicket.save = () => {
console.log(Submitable) // logs undefiened
if (Submitable) {
return true
} else {
return `Please fill out the following fields before s
浏览 25提问于2019-10-01得票数 1
回答已采纳
2回答
基本上，我有一个组件，它是一个用户已经加入的房间列表。在这个组件的顶部有一个搜索部分，除了搜索输入，还有一些关于搜索的选项，比如按“房间名称”进行搜索，按“组织名称”进行搜索等等。我将这些选项保存在数组中的对象中，与选项的id放在一起。然后我映射这个数组来显示所有选项。现在我可以显示这些选项，但是我找不到一种方法来知道用户选择了哪些选项。用户只需选择一个选项，然后突出显示该选项。
这是组件
这是我的密码
浏览 5提问于2022-04-03得票数 0
在使用React.js时，我有一些问题。假设我们有那些useEffect，在某些a.jsx中具有相同的依赖关系。
// a.jsx
const Main = () => {
useEffect(() => {
console.log(1);
}, []);
useEffect(() => {
console.log(2);
}, []);
return <p>asdf</p>
}
在b.jsx中，我将函数集合为一个useEffect，如下所示：
//b.jsx
const Main = () => {
浏览 0提问于2021-12-03得票数 2
回答已采纳
1回答
我正在编写一个自定义的分页钩子，它将获取一个API，并将一些数据返回给我，比如React查询。相当简单。我尝试做的是在状态(在本例中为cursor)更新时触发该钩子。 这是钩子本身： import axios from "../api/axios";
import { useEffect, useRef, useState } from "react";
interface FetchInfiniteResourceProps {
// The URL of the API endpoint
url: string;
// Cursor of t
浏览 3提问于2021-07-30得票数 3
回答已采纳
import React, { useState } from 'react'
export const BreedsSelect = props => {
const [selectedBreed, setSelectedBreed] = useState(null)
const options = props.breeds
return (
<div>
<select
value={selectedBreed}
onChange={e => setSelectedBreed(e
浏览 4提问于2022-10-24得票数 0
回答已采纳
1回答
嘿，伙计们，我有一个关于从API中读取数据并在模块react(本机)的帮助下显示数据的问题。当我试图访问数据时，我只是清空字段，这是我目前的状态：
import React, {useEffect, useState} from 'react';
import {Dimensions, StyleSheet, Text, View} from "react-native";
export default function () {
const [data, setData] = useState({})
const [isLoading
浏览 1提问于2020-07-06得票数 0
回答已采纳
我不知道我的代码到底出了什么问题，我得到了这个错误：
React缺少一个依赖项：‘pros.History’。要么包含它，要么删除依赖数组
const mapState = ({ user }) => ({
signInSuccess: user.signInSuccess
});
const SignIn = props => {
const { signInSuccess } = useSelector(mapState);
const dispatch = useDispatch();
const [email, setEmail] = use
浏览 3提问于2022-03-08得票数 -1
回答已采纳
1回答
我的-app.js上有以下代码：
import { useState, useEffect } from "react";
import PropTypes from "prop-types";
...
export default function MyApp(props) {
const { Component, pageProps } = props;
const [cartItems, setCartItems] = useState([]);
//this prop will be passed to all
浏览 3提问于2021-03-06得票数 0
回答已采纳
当用户在输入之外单击时，我尝试使用mousedown事件来关闭自动完成。 代码： // listen to mouse clicking outside of autocomplete or input
useEffect(() => {
document.addEventListener("mousedown", handleClickOutsideAutocomplete);
return () => {
document.removeEventListener("mousedown", handleClickOutsideA
浏览 14提问于2020-10-06得票数 1
1回答
我使用axios通过REST从save.json文件中获取信息。
问题是，我似乎无法将结果返回到代码顶部的“任务”中。我不知道在我的代码中应该把它放在哪里，我也不知道该写什么。我希望你有一些建议或解决方案。
这是我要获取的代码：
export default function Tasks() {
let [tasks, setTasks] = useState([
{
content: 'Example',
}
]);
useEffect(() => {
axios.get('http://localhost:
浏览 4提问于2019-11-08得票数 0
回答已采纳
我估计useEffect钩子是在每次渲染之后运行的，如果提供了一个空的依赖数组：
useEffect(() => {
performSideEffect();
}, []);
但是这和下面的有什么不同呢？
useEffect(() => {
performSideEffect();
});
注意末尾缺少[]。linter插件不会抛出警告。
浏览 10提问于2019-10-27得票数 83
回答已采纳
1回答
所以这是个奇怪的问题。昨天一切正常，我可以看到显示的类别对象，我可以在类别之间切换，但是今天我想继续这个项目，但是数据没有显示，我甚至看不到控制台中的对象。有什么问题吗，我真的很感激你的帮助
import React, {useState, useEffect} from 'react'
import URL from '../utilis/URL'
const BookContext = React.createContext();
export default function BooksProvider({ children }) {
const
浏览 3提问于2021-03-22得票数 0
回答已采纳
我处于一个无法在react中使用useState或useEffect的位置。如果我使用useState，它会触发无限渲染，我不能使用useEffect，因为我需要状态来做一些事情。
示例：
export default function MyApp(props) {
const [options, setOptions] = useState([]);
const renderBody = (index) => {
var temp = [];
temp.push(props.data.results[index].correct_answ
浏览 0提问于2021-02-26得票数 0
我知道有类似的问题，但我不能找出为什么会发生错误。Div显示，但随后应用程序崩溃(好像是某个长度问题)
代码类似于我找到的示例，如下面的
我做错了什么？
这是组件：
import React, { useState, useEffect } from 'react'
/* import Button from '../Button' */
import { getPlanets } from '../../services/index'
import './Planetas.css'
const Planetas = () =
浏览 19提问于2019-07-12得票数 4
回答已采纳
我有一个页面，它接受大量用户输入，并使用react上下文对象保存它们。我遇到的问题是，如果有人在保存条目之前离开页面，我希望提示用户继续或取消，并保持当前页面和状态的灵活性。我最初在一个useEffect钩子中设置了这样的代码，它监视输入中的状态变化。 useEffect(() => {
window.onbeforeunload = () => {
return true
}
},[someState]) 这适用于所有类型的浏览器导航(刷新按钮、主页按钮、关闭窗口、输入新的url等)。但在浏览器中单击后退或前进按钮时则不会。 如何在状态更改为不触
浏览 44提问于2021-01-21得票数 0
我的firestore数据库中有一个保存服务类别的数组。当用户进入详细信息部分时，我希望显示这些类别。 我的问题是，每当我进入详细信息屏幕时，我都会在尝试映射数组时得到一个错误。 我在这里得到一个错误： {details.category.map((category,index)=> (
<View style={styles.categoryContainer} key={index}>
<FontAwesome name="tag" size={16} color="#fff"
浏览 9提问于2021-07-12得票数 2
回答已采纳
这是我的错误：“'setPartData‘函数在每次渲染时使useEffect钩子(在第44行)的依赖项发生变化。将其移动到useEffect回调中。或者，将'setPartData’定义包装到它自己的useCallback() Hook.eslint(Hook.eslint-hooks/useCallback-deps)中。” 我应该如何最好地解决这个问题，因为我无法从数组中删除url和setPartData，也无法禁用eslint规则。 /* eslint-disable no-shadow */
import { useState, useEffect } fr
浏览 88提问于2020-10-10得票数 0
回答已采纳
我已经通过使用axios.get()方法在我的react useeffect钩子中放置了一个RESTFUL API，我需要这个REST API函数在页面的每次刷新时被获取并运行吗？
实际上，当我测试我的应用程序时，它只运行一次，并且不再更新
我的react使用效果如下
React.useEffect(() => {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
axios.get('http://127.0.0.1:9000/api/is_logged_in/')
.then
浏览 0提问于2020-08-21得票数 0
1回答
基本上，我正在学习如何调用api，我正在处理开放的天气api，试图显示几个不同城市的名称、温度和温度。问题是，响应是数组的对象，并试图将所有城市的名称放到状态中，这样我就可以显示它们。让所有的名字进入州的最好方法是什么？
import "./App.css";
import React, { useEffect, useState } from "react";
import axios from "axios";
function App() {
const [cityName, setCityName] = useSta
浏览 3提问于2021-06-26得票数 1
回答已采纳
1回答
也许有人能帮我，我需要为我的数据设置一个键，我如何从Home.jsx页面做这件事？
API:
<?php
$images = [
"logo" => "http://www.cbp-exercises.test/cowboy_cafe_react/cowboy-coffee-shop/src/api/img/logo.svg",
"counter" => "http://www.cbp-exercises.test/cowboy_cafe_react/cowboy-coffee-shop/src/api
浏览 3提问于2022-10-09得票数 1
1回答
是否有办法重构/减少此代码？是的但我不知道该怎么做。我正在从我的API中获取数据。
export default function Plant() {
const [plant, setPlant] = useState([])
const [value1, setValue1] = useState(null);
const [value2, setValue2] = useState(null)
const [value3, setValue3] = useState(null)
...
useEffect(() => {
浏览 6提问于2022-05-28得票数 -1
1回答
我有一个功能组件，它在页面加载时从http请求中检索数据，并更新状态以使用useState存储数据。然后我尝试从数据中映射一个嵌套数组(polls.pollOptions)，得到一个错误："TypeError:无法读取未定义的的属性' map‘“。如果我删除map函数并检查function组件扩展，我可以看到状态被更新了，并且它有正确的数据。那么，为什么这不呈现到屏幕上&为什么在数据需要映射时接收一个错误呢？这是我的组成部分：
import React, { useState, useEffect } from "react";
import axios
浏览 1提问于2021-05-02得票数 3
回答已采纳
尝试仅在定义了'onSnapshot‘时运行firestore 'user’。一开始，user是一个空对象，后来它变成了一个有id、name等的对象，所以这不应该运行...但是这个' if‘语句似乎不起作用( firestore onSnapshot将运行，即使它是未定义的)。 如何解决这个问题？ useEffect(() => {
if (user) { //object is undefined at first, but gets defined later
const unsubscribe = firebase
浏览 10提问于2020-06-20得票数 0
回答已采纳
1回答
我使用这个来帮助使用useReducer钩子。
我已经创建了这个上下文组件，因为我正在使用react传单路由机为路由创建标记，并且我希望将纬度和经度保存在本地存储中；我能够保存它们，但我无法更新它们！
本质上，在我的UserContext组件中，我创建了这个还原器函数：
function userReducer(state, { type, payload }) {
switch (type) {
case 'isLengthOfMarkersLessThanTwoFalse': {
return {
...state,
浏览 1提问于2021-01-08得票数 1
1回答
我正在将文件从类组件转换为功能组件。
let embellishmentRefs = createRef<AddArtEmbellishmentEntry>();
useEffect(() => {
const embellishments = Object.assign([], props.orderLinesDetailed[0].embellishments);
embellishments.forEach((embellishment, i) => {
embellishment.Id = i;
浏览 1提问于2022-03-15得票数 1
回答已采纳
我试图使用numberArray和useEffect钩子在useState中添加随机数列表，但在useEffect方法中设置状态之后记录结果，但它没有更新状态。
import React, { useState,useEffect } from 'react';
const SortingTry = () => {
const [numberArray, setNumberArray] = useState([1,2,3,4,5]);
const ferin = () => {
var value = [];
va
浏览 3提问于2019-12-15得票数 1
回答已采纳
1回答
我有一个防火墙数据库，它有一个名为" post“的集合，在post中有6个变量(displayName、userName、验证、文本、图像、化身)。其想法是，数据库中将有多个帖子。
反应守则：
const [posts, setPosts] = useState([]);
//Whenever the firebase database changes, it runs this method
useEffect(() => {
db.collection("posts").onSnapshot((snapshot)
浏览 2提问于2021-02-06得票数 0
回答已采纳
1回答
我有一个应用程序( app原生的)，我正在进行一个搜索查询，它根据一个文档字段找到一个特定的文档，它是一个可以被扫描的条形码，然后使用扫描的值想要在防火墙中查找对象，每个对象都有保存条形码值的字段。我只想找到它。
我跟踪了这个。
这就是我目前的情况：
useEffect(() => {
saveData();
}, []);
const saveData = async () => {
const productRef = db.collection("products");
const queryRef = await produ
浏览 2提问于2021-09-29得票数 0
回答已采纳
我有一个组件，其中包含以下useEffect： const [charactersInfo, setCharactersInfo] = useState(null);
const [page, setPage] = useState(1);
useEffect(() => {
fetch(`https://api/api/character/?page=${page}`)
.then((res) => res.json())
.then((result) => {
setCharactersInfo(resul
浏览 6提问于2021-08-22得票数 1
问题是，这个状态来自后端，它是一个使用useState存储在状态中的消息数组。此状态将在子组件中传递。问题是，在将特定密钥存储到状态之前，我希望更改它的值。
样本
消息数组示例数据
const messages = [
{
value: 'sample value one',
status: false,
},
{
value: 'sample value two',
status: false,
},
];
UseSelector
cons
浏览 3提问于2021-10-17得票数 1
回答已采纳
1回答
react组件中的一个函数虽然只被调用了一次，但却会运行多次，这有什么原因吗？
我有这个自动调用自身的测试函数，如下所示：
let xfunction = (() =>
{
console.log('test');
}
)();
这是我在控制台中得到的：
App.js源代码：
import React, { useState, useEffect } from 'react';
import { getAllPokemons } from './services/pokemon'
import
浏览 14提问于2020-03-13得票数 0
2回答
我有一个简单的fetch请求，它只在第一个呈现时运行。当我用数据更新状态并试图通过它进行映射时，什么都不会显示。作为参考，我得到的数据只是一个条目。使用.map，它应该对每个条目(即1)显示一个项目，但没有显示任何内容。
{quote: "I'm the new Moses"}
import logo from './logo.svg';
import {useState,useEffect} from 'react';
import './App.css';
function App() {
const [user
浏览 3提问于2022-04-09得票数 1
回答已采纳
当从unsplash获取承载的文件时，我得到了一个items.map is not a function错误。
我不确定问题是来自.map还是从源获取文件。
下面是我的代码，这里也是完整的沙箱代码。
import { React, useState, useEffect } from "react";
function MyComponent() {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, set
浏览 1提问于2022-02-09得票数 1
回答已采纳
3回答
在useEffect中调用axios请求将导致无限循环
useEffect(() => {
get();
});
const get = async () => {
await axios.get("http://localhost:5001/events/get").then((res) => {
setEvents(res.data);
});
console.log(events);
};
但是，如果我将依赖项作为第二个参数，则只返回2次空数组。
const [events, setEvents
浏览 13提问于2022-07-12得票数 0
回答已采纳
如何使用react-spring动画显示记录。我们可以在useTransition ()中调用useEffect()吗？当用户导航到页面时，我想从下到上一个一个地动画记录。我已经试过了，什么都没有发生..？任何建议都会很有帮助。
import { useEffect, useState } from "react";
import { useTransition, animated } from "react-spring";
import "./styles.css";
const array1 = [
{ id: "1
浏览 1提问于2021-09-07得票数 0
回答已采纳
我将一个组件(C)作为道具传递给父组件(A)内的一个子组件(B)。A的状态也被传递给C，并映射到C的状态。但是当我相应地更新A的状态和B的状态时，C的状态不会更新。 我的代码如下所示：(导入语句被省略) const Parent = (props) => {
.............(other state)
const [info, setInfo] = React.useState(props.info);
const handleDataChanged = (d) => { setInfo(d); }
return (
浏览 29提问于2019-12-14得票数 2
回答已采纳
这是我第一次尝试在FireBase中使用React Native (expo)，我在异步调用时遇到了很多困难。 现在我试图通过2次调用FireBase来检索一些数据(我不知道这样做是否正确)。 useEffect(() => {
let isMounted = true;
if (isMounted) {
let exercies1 = {};
db.ref("trainings_exercies/" + trainingID + "/exercies").on(
"value",
(snapshot) =>
浏览 11提问于2020-10-11得票数 0
我试图用这段代码映射JSON数据.
import {useEffect,useState} from 'react'
function Tourapi() {
const[tours,settour]=useState([])
const[loading,setloading]=useState(true)
useEffect(()=>{
fetchtour()
},[])
const fetchtour= async()=> {
const furl='https://ww
浏览 1提问于2022-01-07得票数 0
回答已采纳
4回答
我正在使用React，我试图将GET请求的结果映射到db，以便在我的页面中显示一些选项卡。
这是我的GET请求：
useEffect(async ()=>{
const a = await getCategories();
setCategories(a)
},[])
const [categories, setCategories] = useState()
然后使用useEffect钩子将返回的数组存储在函数组件状态中：
useEffect(async ()=>{
const a = await getCategories();
setCateg
浏览 2提问于2020-10-23得票数 0
回答已采纳
我在尝试从API获取数据并在返回时显示它们时遇到错误。我使用的是useState和useEffect。真的，我仍然不理解它，我正在努力学习并实现这一点。 import React, {useState, useEffect} from 'react'
function About() {
const [userData, setUserData] = useState(true)
async function getData()
{
let response = await fetch('https://api
浏览 19提问于2020-09-28得票数 0
让我们直接进入代码来演示：
function App() {
let message = '!!message init value, this should not be displayed!!';
const busyState = React.useState(true);
let isBusy = busyState[0];
let setIsBusy = busyState[1];
React.useEffect(() => {
log('didMount');
getLatestMessage();
浏览 16提问于2019-11-15得票数 0
回答已采纳
import React, {useState, useEffect} from "react";
import './App.css';
function App() {
const [ data, setData ] = useState([]);
useEffect( ()=> {
loadData();
//getData();
}, []);
const loadData = async () => {
await fetch("https://randomuser.me/api&#
浏览 3提问于2022-05-22得票数 1
我正在尝试呈现从API获得的数组的team字段。console.log(data)成功地记录了它，但是当我试图呈现它时，它根本没有显示任何东西。谢谢你的帮助!
Home.js
const Home = () => {
const [data, setData] = useState();
const getData = async () => {
try {
const res = await fetch('url');
const data = await res.json();
浏览 5提问于2022-07-18得票数 1
我开始掌握获取和使用API，但我试图引用一个使用货币的代码源代码，并将其应用到我自己的版本中，但使用返回随机活动的API。为了更好地掌握我的理解，我所使用的项目是“反应”--土生土长的世博会cli。
我想要做的是:按下搜索按钮->返回随机活动去做。
目前，它正在这样做，但是由于我的旧API返回一个不同货币的对象数组，而我当前的随机活动API只返回一个活动，我相信这就是为什么我的格式化是关闭的，但是在阅读和尝试了不同的.then操作之后，我似乎无法完全理解如何正确地显示我的随机活动，而不是我当前获得的相同活动的多行，我希望它只显示一次。(我先前的问题中，字母是垂直的，自那以后我就固定了)。
浏览 4提问于2022-10-28得票数 0
Appjs
import { useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./App.css";
import Header from "./components/Header";
import Home from "./components/Home";
import Login from "./components/Login";
import
浏览 8提问于2022-04-02得票数 1
我可以使用componentDidUpdate或什么组件的类型记录？我的程序找不到函数。
但是，例如，UseEffect()运行良好。
浏览 3提问于2021-10-07得票数 0
回答已采纳
我试图从rest站点呈现数据，我可以毫无问题地获取所有信息，但首先使用空数组复制数据，这将与map()函数产生冲突。
当我做一个控制台标志，我可以看到复制。我所需要的是只获取包含数据和空数组的数组，或者如何选择带有数据的数组，因为当我使用map()函数时，它读取空数组时会出错。
useFetchData.js
import { useEffect, useState} from 'react';
import http from '../../services/httpservices';
import config from '../../s
浏览 5提问于2022-06-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
