React上下文API/挂钩
React上下文API/挂钩（React Context API/Hooks）是React提供的一种在组件树中共享数据的方式。它允许开发者在不通过显式地将属性逐层传递的情况下，将数据直接传递给任意组件。
React上下文API通过创建一个上下文对象，允许数据在组件树中被共享。它包含一个提供者（Provider）组件，用于提供数据，并将其包裹在组件树中。同时，通过消费者（Consumer）组件，子组件可以订阅并访问这个共享的数据。
相比较传统的属性传递方式，React上下文API的优势在于：
- 简化了组件间的数据传递：通过上下文API，开发者可以直接在组件树中传递数据，而不需要在每个中间组件中显式地传递属性。
- 提高了代码的可读性和可维护性：组件之间共享的数据可以更加清晰地定义和访问，使代码更易于理解和维护。
- 方便跨层级组件传递数据：上下文API可以解决组件层级深的情况下，数据传递的繁琐问题。
- 兼容函数式组件和类组件：React上下文API既可以在函数式组件中使用，也可以在类组件中使用。
React上下文API的应用场景包括但不限于：
- 全局主题样式：通过上下文API传递主题样式配置，实现全局样式的统一管理。
- 用户登录信息：在用户登录后，将登录状态信息通过上下文API传递给各个组件，实现认证功能。
- 多语言支持：将当前语言配置通过上下文API传递给组件，实现多语言切换功能。
- 全局数据状态管理：在应用中管理全局状态，避免多层级组件传递数据的麻烦。
腾讯云提供的相关产品和文档：
- 腾讯云Serverless Cloud Function：使用Serverless架构搭建云函数，实现快速开发和部署React应用。
- 腾讯云云开发（CloudBase）：为前端开发者提供一站式云端研发工具，支持React等多种前端框架。
- 腾讯云云原生应用服务TKE：提供企业级Kubernetes容器服务，可用于部署和管理React应用的容器化环境。
- 腾讯云数据库COS（对象存储）：为React应用提供高可靠性、可扩展性的云存储服务，可用于存储和管理应用中的多媒体资源。
- 腾讯云人工智能平台AI Lab：提供丰富的人工智能开发工具和服务，可用于React应用中的AI功能集成。
以上是对React上下文API/挂钩的简要介绍，以及与之相关的腾讯云产品和文档链接。希望能对你有所帮助！
相关·内容
我对React Context还是个新手。我需要在react上下文中调用API，以便在整个react应用程序中使用它的数据。此外，在react应用程序的各个组件上的某些CRUD操作上也需要调用相同的API。 现在，我将API数据存储在redux中，我不想存储它。 这是我尝试过的方法.. context.js文件 import React, { useState, createContext,useEffect } from 'react';
import {getData} from './actionMethods';
const NewContext
浏览 27提问于2019-12-17得票数 4
回答已采纳
我需要这个问题的帮助，我的应用程序组件，如下图所示。我想在单击view details按钮时使用useState将跟踪对象inselectedTrack存储在状态中。然后使用它来显示跟踪详细信息，而不是从API中进行另一次提取来获取大头针详细信息，但当我在内部使用useContext时，请给我这个错误的TypeError: Cannot read property 'selectedTrack' of undefined。
import React from 'react';
import Header from './Header';
im
浏览 1提问于2020-02-06得票数 3
我有一个包含很多组件的react应用程序。我使用React context api来管理应用程序中的状态。 我在上下文中的反应状态如下所示。 { key1: value1, key2: value2, key3 : { key4 : { key5 : value5 } } } 所以，它基本上是一个嵌套的json。 现在，其中一个键，假设键3是从react组件树中的许多组件更新的。它可以由树层次结构中的任何组件更新。 因此，在本例中，我想在key3发生变化时调用后端api。我如何在react中做到这一点？ 编辑1:- 下面是我如何设置我的上下文。 import React, { create
浏览 42提问于2021-10-26得票数 2
我有一个应用程序，其中大部分数据都存储在商店中，但所选项目是通过使用React.Context来提供的。 React-Redux提供了connect应用程序接口，该api接受以state和props为组件的mapStateToProps函数。 我想要的，如果它没有打破钩子，是这样的： function mapStateToProps(state){
const selectedItemId = useContext(MySelectedItemContext)
return {
item: state.items[selectedItemId]
}
} 但这当然是不可能的
浏览 31提问于2021-09-03得票数 1
BookContext.js
import React, { createContext, useState } from 'react'
export const BookContext = createContext()
export default function BookContextProvider(props) {
const [books, setbooks] = useState([
{ title: 'the way of kings' , id:1 },
{ title: 'the name
浏览 0提问于2020-04-28得票数 0
我有问题的反应-路由器-多玛Link组件只是改变的网址，而不是更新路由。
它可以很好地连接到/courses -> /courses/<course-slug>
然后是/courses/<course-slug> -> /lessons/<lesson-slug>
然而，我在链接到其他课程(如/lessons/<lesson-slug> -> /lessons/<different-lesson-slug> )时遇到了问题
它似乎只更新LessonsList组件和更新URL，而不更新路由/内容或父Lesson。
我已
浏览 3提问于2017-08-04得票数 5
回答已采纳
我想在我的上下文中从一个方法返回一个布尔值，我该怎么做呢？我的方法显然是不正确的。作为一个初学者，我经常对在哪里使用哪种语法感到困惑。
这是我的ContextProvider：
import React, { Component } from 'react';
import AuthContext from './AuthContext';
// Then create a provider Component to update children Components once the user role changes
class AuthProvider
浏览 28提问于2019-11-02得票数 1
回答已采纳
我一直在尝试使用React Native中的上下文钩子，但它似乎不起作用，它返回未定义。但是，当我使用<Context.Consumer>时，它确实工作得很好，你知道useContext在React Native中是否受支持吗？
浏览 69提问于2019-09-23得票数 4
回答已采纳
1回答
我想在导航抽屉中使用上下文API，而我被困在了如何做到这一点上？
我有两个屏幕显示屏幕和上传屏幕，在上传屏幕我收集数据，并将它们发送到useState挂钩，然后把他们发送到显示屏幕。在显示屏幕上，我把这个数据添加到数组中，现在的问题是当我回去上传屏幕再发送更多的数据时，显示屏幕数组得到返回到它的初始状态，即为空。现在，我需要创建一个上下文api，以便在其中添加数据。我怎么能这么做。下面是我的代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow s
浏览 4提问于2021-12-17得票数 2
1回答
API调用似乎不起作用
、、、、
我正在构建一个天气网络应用程序、用户界面和 api。直到昨天，一切都朝着正确的方向发展。今天，我继续编写代码，但是API调用没有产生任何结果(根据我在下面代码中的操作，我得到了无限加载)。我不明白问题出在哪里，也是因为自上次代码运行以来，我没有修改代码，浏览器的控制台部分也没有出现任何错误。
在这里，代码：
import './App.css';
import React, { useState, useEffect } from 'react';
import NavBar from '../Components/NavBar/NavBar'
浏览 3提问于2021-08-04得票数 0
回答已采纳
2回答
我正在自学React Hooks，我想在用户在搜索框中键入内容时更新API调用。一种实况搜索。我知道这个事件只在页面加载时触发，但是我该如何解决这个问题呢？ 示例如下：https://codesandbox.io/s/6x1xp57zmk import React, {useState, useEffect} from 'react';
function App() {
const [cardNames, setCardName] = useState([])
const rezCards = async () => {
//const rez =
浏览 25提问于2019-04-22得票数 0
回答已采纳
1回答
我将客户端设置的配置设置存储在本地存储中。当有人更新一个值时，我们将其保存到本地存储中。当他们加载页面时，我们从本地存储中获取它。粘性状态的代码是： import React from 'react';
export default function useStickyState(key, defaultValue) {
if (!process.browser) {
return React.useState({})
}
const [value, setValue] = React.useState(() => {
浏览 19提问于2021-04-15得票数 1
当我从子组件提交表单时，如何更新定义了父contex api的类的状态？
import React, {createContext,Component} from 'react'
import http from './services/httpService'
import {MyApiUrl} from './services/httpService'
export const GlobalState = createContext()
export class DataProvider extends Component{
浏览 4提问于2021-11-03得票数 0
我想得到我目前的职位，并弄到一些咖啡馆的名单。 我创建了一个getLocation函数，并将其导入到上下文文件CafeContext中。但是，在拿到咖啡馆名单之前，我找不到这个职位。 当我将经度/经度设置在37.，125范围内时，它有时会起作用。 这是getLocation import { useState, useEffect } from "react";
import * as Location from "expo-location";
const getLocation = () => {
const [myX, setMyX] = u
浏览 17提问于2020-09-09得票数 0
2回答
我有一个react应用程序，我在其中使用上下文API作为状态管理。我从服务器获取一个特定值，将其分配给组件状态，然后将其存储为上下文值。但是，问题是，每当页面刷新和重新加载时，上下文值都会被清除，因为前面提到的状态会丢失。有没有一种方法可以在页面重新加载的情况下存储和保留这个值？除了本地存储之外，还有其他方法吗？ 我真的很感谢你的帮助。
浏览 14提问于2020-10-22得票数 0
回答已采纳
1回答
React不更新React上下文中的状态。但作为回报，状态数据呈现是正确的。这是样本：
context.js
const globalContext = React.createContext();
const initialState = {
statuses: null,
};
const globalReducer = (state, action) => {
switch (action.type) {
case 'SET_STATUSES':
return { ...state, statuses: action.payload };
浏览 0提问于2020-11-19得票数 1
我正在做一个react redux web应用程序，在那里我需要一些受保护的路径，我已经看过很多关于如何做它的教程，但是它们不适用于新版本的react路由器-dom，我觉得我非常接近于实现它，但是有一些东西不起作用，当我刷新页面时，我将auth值设置为false，我不得不再次登录，我如何解决它？这是我的密码。
useAuth.js文件
import React from "react";
const authContext = React.createContext();
function useAuth() {
const [authed, setAuthed] =
浏览 5提问于2021-12-21得票数 1
我在我的react项目中使用。该库提供了钩子，可以非常轻松地执行身份验证。
因此在功能组件中，为了获取访问令牌，
if (account && inProgress === "none") {
instance.acquireTokenSilent({
...loginRequest,
account: account
}).then((response) => {
callMsGraph(response.accessToken).then(response => setGraphData(response));
});
}
需要在使用const
浏览 1提问于2021-01-25得票数 0
当从独立的组件调用自定义react钩子时，有没有一种方法可以保留状态？我在这里做了一个简单的例子，但我想在我的应用程序中使用相同的逻辑来存储对api的fetch调用，并在我的应用程序中的不同位置使用数据，而不需要多次调用api。
import React, { useState, useEffect } from 'react';
function useCounter(intialCount = 0){
const [count, setCount] = useState(0);
// Similar to componentDidMount and compone
浏览 1提问于2021-03-03得票数 0
1回答
上下文
我正在与一个混合next.js和反应路由器应用程序工作。应用程序的一部分由react路由器(基于散列的)处理，部分由next.js路由器处理。有一些常见的组件使用与当前路由状态相关的钩子(例如useLocation)，如果缺少react路由器提供者包装器，这些组件就会崩溃。
问题
我想要编写一个钩子，返回useLocation (从react路由器-dom)或useRouter (从next.js)，这取决于它是否在当前上下文中检测到了react路由器提供者。
然后，我将在公共组件中使用这个钩子，这样不管它们在哪个上下文中使用，它们都能工作。
有一个类似的解决方案，用于检测是否使用us
浏览 2提问于2022-04-22得票数 1
我是R3F & Three.js的新手，我很难将时间值作为一个简单着色器的变量。
我有一个GLSL着色器作为JavaScript文件，我想使用统一的u_time更新时间值。
我正在尝试使用React组件中的THREE.Clock传递时间变量。当我在我的useEffect钩子里面console.log定时器时，我得到时间控制台记录为一个四舍五入的值，因为我需要它作为着色器。但是，我不确定如何返回此值以在我的着色器中使用，作为u_time值。我的useEffect钩子里是不是遗漏了什么？
React组件代码
import React, { useRef, useEffect, useSta
浏览 95提问于2021-05-17得票数 0
1回答
我开始学习React JS，有人能给我解释一下这两个文件之间的区别吗？它们做的都是一样的事情。
第一个JS
import React, { useEffect, useState } from 'react'
import Product from './Product';
import './Today.css';
import { Link } from 'react-router-dom';
import { render } from '@testing-library/react';
export de
浏览 0提问于2020-07-19得票数 0
我已经使用摩卡自动化了我的apis。结构就像-
1.对于每个api，都有一个mocha测试驻留的api_namex.js文件。
每个api_namex.js文件都有一个描述()和多个描述()中的it()
现在，如果我在其中一个api_namex.js文件中使用api_namex.js(例如api_name1.js)，那么在运行整个测试套件(包括运行所有api_namex.js文件)时，beforeEach()将被调用所有这些文件。
如何使它只针对预期的api_namex.js文件运行？与以前的问题相同。
my_areas.js文件附在下面，我在运行整个测试套件时使用了befor
浏览 3提问于2017-01-18得票数 3
回答已采纳
如何将值作为初始值首先从API的数据中获取，然后在用户开始键入或删除文本时更改？ import React, {useState} from 'react'
const MyInput = () => {
const [counter, setCounter] = useState(0)
const initial = dataFromApi.length
const total = 1000
const counterChange = (e) => {
setCounter(initial.length + e.target.va
浏览 29提问于2021-10-23得票数 0
回答已采纳
我在控制台上遇到了这个错误。我看了一下前面的问题，但没有多大帮助。有人知道我是怎么造成这个无限循环的吗？
“隐藏错误:太多的重呈现。React限制呈现的次数，以防止无限循环。”
import logo from './logo.svg';
import './App.css';
import Movie from './components/Movie'
import React, { useEffect, useState } from 'react';
const FEATURED_API = "https:
浏览 16提问于2022-06-24得票数 2
我读过很多关于在React中创建和使用自定义钩子的文章，但是我不明白为什么我的代码不能工作。
以下是问题代码的核心：
cont MyContextProvider = (props) => {
const useCompleteWizard = () => {
// Define `body` object
useEffect(() => {
// const { loading, data } = useFetchPost(`${API_ROOT()}account_management/fleets`, body, app.awsCo
浏览 0提问于2019-08-26得票数 0
? 我在React项目中的crud操作中工作，在我的项目中我做了一个帖子，并获得了Api 成功。现在我正尝试在另一个组件中通过id获取数据。但我得到的是这种 of error TypeError:无法读取未定义的属性'params‘。请帮我解决这个问题 错误。所有API都工作正常 这是App.js import React from 'react';
// import './App.css';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom&
浏览 8提问于2020-04-08得票数 0
回答已采纳
我想封装一个npm组件，我想使用Redux来管理这个React组件中的状态。
当另一个React项目导入我的组件时，这个React项目的redux实例会与我的React组件发生冲突吗？
下面是示例:组件将如下所示：
// File Explorer Component, will be build into a npm package
import React from "react";
import { Provider } from "react-redux";
import { store } from "./store";
functio
浏览 2提问于2022-01-13得票数 3
回答已采纳
我构建了一个Pokedex，运行良好，但是，我在React-Redux Dev工具中看到了一个“问题”： ? "getPokemonsInfo“在"getPokemonsUrls”之前被调用，但是，"getPokemonsInfo“应该只在状态的属性发生变化时调用(使用useEffect())，而这种情况发生在"getPokemonsUrls”中。 import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-r
浏览 6提问于2021-01-23得票数 1
回答已采纳
2回答
触发一些API，一旦响应状态为空
、、、、
当react状态中的值为空时，我想要触发一个API来执行一些操作，是否有一种方法可以在react状态挂钩中实现？
浏览 9提问于2022-03-27得票数 0
回答已采纳
我正在用React Native编写一个助手组件。问题是它不允许我在其中使用钩子。
我见过一些线程，人们建议使用类而不是函数组件。但是类也不允许使用钩子。
下面是我的代码：
import React, {useEffect, useState} from 'react';
import * as Constants from '../config/Constants';
import * as SecureStore from 'expo-secure-store';
import { useDispatch, useSelect
浏览 0提问于2021-07-26得票数 0
1回答
我有一个简单的ToDo应用程序，其中有一些组件。我想要做的就是共享状态和更新上下文数据。我可以用道具来做这件事，但是在将来，如果我有更多的组件，那么用道具传递数据就太麻烦了。这是我的密码。
MainContext.js
import React, { createContext, useState } from "react";
const MainContext = createContext([{}, () => {}]);
const MainContextProvider = (props) => {
const [state, setState]
浏览 1提问于2020-09-06得票数 1
回答已采纳
我目前正在尝试传入一个用于正向地理编码的位置，但我不知道为什么我的调用似乎会触发无限循环。 我尝试使用地图传入位置，然后在代码中的其他地方使用来自API的响应。 这是我的数据提供者..。 import React, {
useEffect,
useState
} from "react"
export const GeoCodeContext = React.createContext()
export const GeoCodeProvider = (props) => {
const [latLong, setLatLong] = useState(
浏览 11提问于2020-09-23得票数 0
回答已采纳
我是新动力CRM。我的项目包括表单提交和验证。我计划使用Redux前端和CRM的服务来构建一个产品。
构建CRM Web资源的CRM最佳实践是什么，谁能指导我？
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import CaseSummary from './components/CaseSummary.jsx';
window.addEventListener('load',
浏览 0提问于2019-06-16得票数 2
2回答
API在响应中被调用两次
、、、
我的API在浏览器页面重新加载时被调用了两次，在控制台中进行了检查。你能建议一下。我使用axios来调用React中的API。
import React, {useState,useEffect} from "react"
import {Container,Row,Col} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css"
import './App.css';
import Axios from "axios";
import
浏览 3提问于2022-07-16得票数 2
我对上下文API相当陌生，除了useState和useEffect之外，我还会对钩子做出反应，所以请告诉我。
我正在尝试创建一个定制的useGet钩子，我可以用它从后端获取一些数据，然后使用上下文API存储它，这样如果我在应用程序的其他地方再次使用相同的上下文，它可以首先检查数据是否已被检索，并节省了一些时间和资源去执行另一个GET请求。我正在尝试编写它，以便用于各种不同的数据和上下文。
我已经完成了大部分工作，直到我尝试将数据发送到useReducer状态，然后得到错误：
Hooks can only be called inside the body of a function compo
浏览 0提问于2021-07-15得票数 2
回答已采纳
我有以下代码：
function MyApp({ Component, pageProps }: AppProps) {
const { tronLinkAuth, tronLinkLoading, mutateTronLink } = useTronLink();
const { authenticatedUser, authLoading, authLoggedOut, mutateAuth } = useAuthenticatedUser();
return (
<React.StrictMode>
<C
浏览 6提问于2021-12-09得票数 0
页面加载后，我需要从URL获取值并将其发送到API，但因为父对象中的状态正在更改，所以进行了3次api调用。我希望它只调用一次API。
import React, {useContext, useEffect} from 'react';
import Context from '../components/context';
import {RouteComponentProps} from 'react-router-dom';
interface MyProps {
confirmationCode: string,
}
const
浏览 3提问于2019-09-09得票数 0
很抱歉，我发现React Native令人困惑不已，令人费解。我使用下面的代码作为一个'helper‘脚本来保存可以被单独的组件访问的对象值。 LogContext.js import React, { useState } from 'react'
export const LogContext = React.createContext({
set: "en",
login: "false",
setLog: () => {},
});
export const LogContextProvider = (pr
浏览 9提问于2020-08-13得票数 0
1回答
我在React/typescript/node中有一个简单的todo应用程序。我有以下组件：
import * as React from "react"
import {forwardRef, useCallback, useEffect} from "react"
import {ITodo} from "../types/type.todo"
import {deleteTodoById, getTodos, updateTodo} from "../api/requests"
import {TextField} from
浏览 0提问于2020-11-15得票数 1
我有一个useLocalStorage钩。如果我在组件中直接使用它，当我试图更新值时，我得到一个错误，setValue不是一个函数。实际上还没有定义。
这是代码片段
// https://github.com/Ibaslogic/localstorage-react-hook-project/blob/main/src/useLocalStorage.js
import { useState, useEffect } from "react";
function getStorageValue(key, defaultValue) {
// getting stored
浏览 6提问于2022-09-29得票数 0
我有代码
router.js
import React from 'react';
import {render} from "react-dom";
import history from './history';
import {Router, Route} from 'react-router'
import Main from "./main/component";
import Profile from "./profile/component";
import TextStatus f
浏览 0提问于2018-01-11得票数 3
回答已采纳
如果标题中的措辞有误，我深表歉意。我最近在我的应用程序中添加了cookie。我的Topnav组件需要访问它们，但我不确定如何将它们放到那里。
App.js -
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Landing from './pages/Landing.js';
import LoginPage from './pa
浏览 13提问于2020-02-26得票数 1
回答已采纳
我正在开发一个react前端，它调用一个API并尝试获取返回的JSON数据，然后使用react-table将其放入表格格式。在这件事上我已经被难住了好几天了。我在React中只使用了函数和钩子。我的主要组件是： const [tableJSON, setTableJSON] = useState('');
const [inquiryCount, setInquiryCount] = useState(1);
const [sortByColumn] = useState('INQ_RECEIVE_DATE');
const [sortByDirection]
浏览 26提问于2020-07-14得票数 3
我还没有做出反应，所以请原谅我，如果这是一个愚蠢的方法来解决这个问题。
我的目标:使用上下文提供程序和自定义钩子处理全局错误。
问题:如果不立即重新添加错误，就无法删除它们。
我在外壳中通过这个组件显示我的错误..。
import React, { useState, useEffect } from 'react'
import Alert from '@mui/material/Alert'
import Collapse from '@mui/material/Collapse'
import { useAlertContext } fro
浏览 0提问于2021-11-04得票数 1
我有一个表单，它有一组复选框、单选按钮和一个按钮。 每次更新复选框或单选按钮的值时，它都会调度一个更新状态的事件。我可以通过单击我的按钮组件<Button context={ExampleContext} />来查看此状态 然而，我似乎不能在父容器中通过添加相同的代码片段来访问我的状态，因为它只是返回未定义的，这是我在我的Button组件中拥有的相同逻辑，所以我不确定为什么它不能工作。 很明显我做错了什么，但我不确定是什么。如何从父容器中访问我的state？ 这里还有一个可用的示例：https://codesandbox.io/s/elegant-minsky-0i4yx 谢谢你
浏览 8提问于2020-03-27得票数 1
回答已采纳
2回答
大家好，我很难理解如何使用React和Redux来访问来自和API的数据，有人能给我一点指导吗?到目前为止，我只想在App.js中显示一小段数据，看看它是如何工作的。任何帮助都将不胜感激，谢谢。 index.js import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'
import {createStore, applyMiddleware, compose} from 'redux';
i
浏览 29提问于2021-04-27得票数 1
1回答
我们的项目必须升级我们的material ui版本，至少最初是升级到版本1。我们的项目规模扩大了，但当前的版本给我们带来了问题。我们当前的版本是v0.20.2，它真的很旧了，你可以看到，哈哈，我遵循了https://material-ui.com/guides/migration-v0x/，但出现了以下错误： Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the fo
浏览 31提问于2020-01-11得票数 1
1回答
我正在尝试让 Sensors API在我的React Web App (不是React Native)中工作，基本上我找不到任何可靠的文档来让它使用javascript工作，这是我到目前为止生成的代码：
import React, { Component } from "react";
export default class Postion extends Component {
state = {
message: "not supported",
};
componentDidMount() {
this.test()
浏览 4提问于2020-05-10得票数 0
我有所有需要通过节点进行身份验证的/api路由，但我也想公开和拥有我可以在react中完成的web路由，并从服务器解耦。
有没有办法让react (或react路由器)处理web路由？
浏览 2提问于2015-06-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
