有没有人能够使用react 16.3中引入的新的上下文API和react-native导航？
我在尝试设置它时遇到了麻烦，因为使用react-native导航没有主组件可以管理状态，然后呈现Context.Provider组件，只有Navigation.startSingleScreenApp或类似的功能。
提前Tks以获取您所能提供的任何帮助
Environment React本地导航版本: 1.1.403 React本地版本: 0.55.4平台: iOS设备信息:模拟器
浏览 1提问于2018-06-05得票数 5
所以我在这里有点不知道该怎么做，我想要一些建议。
我有一个测验应用程序，它有一个问题的计时器。父对象包含timer对象，该对象使用回调来设置剩余秒数，如下所示：
const [seconds, setSeconds] = React.useState<number>(null);
const timer = React.useRef<Timer>(new Timer({duration: 10, callback: i => setSeconds(i)}));
...
return (
<Context value={
浏览 0提问于2019-08-19得票数 1
2回答
我试图优化我的反应应用程序，以消除不必要的渲染。
有关示例，请参阅此快餐店：
在这个示例应用程序中，有两个状态变量存储在上下文中。这些值中的一个每秒钟更新一次，另一个从未更改。
我所想的是为什么每一秒都要调用console.log('rerender');。
根据我的理解，当您对存储在上下文中的变量进行重构时，只有在非结构化变量发生更改时才会收到更新。我只是在访问otherValue，而不是每秒都在改变的elapsed。在此基础上，我为什么要看到console.log('rerender')
在这种情况下，并不是每次都调用console.log('con
浏览 4提问于2020-09-05得票数 3
回答已采纳
我在React中创建了以下上下文：
import { useBoolean } from "@chakra-ui/react"
import { createContext, FC } from "react"
type useBooleanReturn = ReturnType<typeof useBoolean>
export const MobileContext = createContext<
[show: useBooleanReturn[0], setShow: useBooleanReturn[1]] | undefin
浏览 1提问于2021-06-29得票数 0
回答已采纳
面对这个问题，我的上下文返回未定义的值，它返回的只是初始状态。在这里的事务列表中，我试图调用我定义的函数deleteTransaction，但它的错误是它是未定义的。如果我遗漏了什么或者需要补充什么，请告诉我。
这些是我的必需品，以防万一。
"dependencies": {
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "
浏览 0提问于2021-04-07得票数 0
2回答
我是ReactJ的新手。正如我所理解的，React上下文API用于在组件之间共享数据，以避免在嵌套组件中重复使用道具传递数据。但是我可以用一个简单的单独的JS文件来完成它。在JS文件中，我可以简单地声明一个对象来保存数据，并具有一些函数来更新或获取所有组件中存储的数据。
用于存储用户数据的上下文API和JS文件之间的主要区别是什么？我应该在何时何地使用？
浏览 5提问于2021-01-14得票数 3
回答已采纳
有一个函数，我想传递给一个链接组件。我该怎么做？我尝试使用state和useLocation，虽然它们对普通变量很好，但useLocation在试图传递函数时发送null。
const function=someFunction(){}
<Link state={func:function} to="/LoginScreen" style={style.a} >
Login
</Link>
这不管用。
试图使用React上下文的代码：
import React, { useState } from "react";
import {
浏览 13提问于2022-07-02得票数 3
1回答
如何从主题组件导出isDark？或者可以在不导出的情况下从另一个文件中查询isDark？ Toggle.js import React, { Component, useEffect } from "react";
import { Particles as ReactParticles } from 'react-particles-js';
import usePersistentState from '../hooks/PersistentState';
const Theme = () => {
const [isDar
浏览 21提问于2020-09-09得票数 0
我正在尝试使用上下文在React中的两个组件之间传递数据。我想要传递的数据是一个数组searchResults。我已经设置了上下文和所有东西，但是当我尝试在我的第二个组件中使用数组时，我得到了Cannot read property 'map' of undefined，我如何使用我通过上下文发送的第二个组件中的数组呢？
这是我的第一个组件：
import React, { Component } from "react";
import axios from "axios";
export const SearchContext = React
浏览 3提问于2020-05-30得票数 3
我已经实现了React，并且我正在尝试通过子组件中的onClick函数更新提供者内部定义的状态。
这就是我到目前为止在App.js中所做的工作：
import { createContext } from 'react';
const MyContext = React.createContext();
export class MyProvider extends Component {
state = {
currPrj: ''
}
handleBtnClick = prjCode => {
浏览 1提问于2019-03-20得票数 7
回答已采纳
我有一个AuthProvider和useAuth方法，它在我的App.js根文件中返回useContext(AuthContext)，但是，如果我在App.js中console.log useAuth()的返回值，它是未定义的，为什么？在任何其他子组件中，例如Loginpage，都会显示一个authContext。 我的App.js： import { AuthProvider, useAuth } from './providers/AuthProvider'
function App() {
const auth = useAuth()
console.l
浏览 18提问于2021-09-30得票数 0
回答已采纳
在没有消费者的情况下使用contextProvider会被认为是一种糟糕的做法吗？就像我在下面做的那样。我发现它工作得很好。不太确定这是不是正确的方式。
// context
import React, { useState } from 'react'
import { storeProducts, detailProduct } from './assets/data'
const ProductContext = React.createContext()
const ProductProvider = (props) => {
c
浏览 11提问于2019-07-05得票数 0
回答已采纳
1回答
获得以下错误：
一个上下文使用者被呈现为多个子函数，或者一个不是函数的子对象。上下文使用者期望一个子函数是一个函数。如果您确实传递了一个函数，请确保它周围没有尾随或前导空格。
起初，它是工作的，但后来错误开始出现。这是一个维特+尾风+反应应用程序。我得到了不能直接呈现上下文的错误，所以我添加了消费者代码。但后来又出现了新的错误。
这就是我创建的上下文：
import React, {useState, createContext} from 'react'
// creating the food context
export const FoodContext =
浏览 2提问于2021-11-13得票数 0
1回答
让SSR使用
、、
基本上，我们有一个模块，用于读取服务器端呈现的客户端数据，并将数据与找到的数据一起提供给renderToString (客户机使用window.__SOME_DATA__呈现，但我不希望在快速路由上使用全局数据)。
以下是我们所处的位置：
const contentService = new ServerService();
const app = (
<StaticRouter context={context} location={req.url}>
<App/>
</StaticRouter>
);
try {
await con
浏览 0提问于2018-07-23得票数 5
我的目标是在用户输入内容时发出API请求。我正在成功地获得数据。但是，组件正在重命名两次，并给出了此警告。如果我包含“上下文”，我将得到一个无限循环。这是我的密码：
Component.js:
const SearchBox = () => {
const [searchTerm, setSearchTerm] = useState("");
const { handleSearch, searchResults } = useContext(MovieContext);
console.log(searchResults);
useEffect(()
浏览 2提问于2020-02-16得票数 0
React已经发布了上下文API和，但是我们中的大多数人都熟悉Redux，我们应该考虑哪一种。
使用和的目的是什么？请详细解释Redux、Hooks和Context API是如何相互区别的。
浏览 0提问于2019-06-11得票数 18
回答已采纳
1回答
我的应用程序需要提供一个颜色主题，而且我正在尝试使用React上下文来实现主题提供组件，但是它不起作用。我不知道如何从主题提供程序的上下文中获取theme支持对象，以及如何调用作为主题提供程序状态的updateTheme函数？这是我的密码：
ThemeProvider
import React from "react";
import { LightTheme, DarkTheme } from '../themes'
const Context = React.createContext();
export class ThemeProvider exte
浏览 0提问于2020-07-28得票数 3
回答已采纳
1回答
我正在使用React context来存储NextJS网站的区域设置(例如example.com/en/)。设置如下： components/Locale/index.jsx import React from 'react';
const Context = React.createContext();
const { Consumer } = Context;
const Provider = ({ children, locale }) => (
{children}
);
export default { Consumer, Provi
浏览 23提问于2019-01-14得票数 9
1回答
这是我的App.js，我使用的是上下文api，但是我无法在{context.country}和{context.job} (子组件即邻居)中获取数据。这是我的App.js，我使用的是上下文api，但是我无法在{context.country}和{context.job} (子组件即邻居)中获取数据。App.js
import React, { Component } from 'react';
import Neighbour from './Neighbour';
const MyContext = React.createC
浏览 0提问于2018-06-21得票数 1
回答已采纳
关于新的api，我有两个问题：
React有下面的示例。在构造函数(而不是类方法)中声明toggleTheme函数有什么具体原因吗？
import {ThemeContext, themes} from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';
class App extends React.Component {
constructor(props) {
super(props);
this.toggleThem
浏览 0提问于2018-09-29得票数 2
回答已采纳
Hi大家，我在登录注册系统上工作，我使用上下文进行状态管理。我在这个系统中使用cookie，我希望这个cookie函数在一个cookieContext中运行，我可以在main上合并之前运行，但是我现在不能运行。我不明白一切看起来都很好，请帮帮我，我会失去我的
我的上下文代码:
import { createContext } from 'react';
import cookie from 'js-cookie';
const CookieContext = createContext(null);
export const CookieProvider =
浏览 0提问于2021-01-31得票数 1
回答已采纳
我有三个组件被路由到不同的路径。我想重组我的应用程序，以便我可以通过道具将状态从我的SubmitProject组件传递到我的Portfolio组件，我仍然希望它们有单独的路径，即/portfolio和/SubmitProject，我计划打开两个浏览器窗口来测试，当我在SubmitProject上提交表单时，它会出现在Portfolio上，然后我将使用防火墙将我的状态持久化到一个数据库。
我是否需要让我的状态处于像App.js这样的顶级组件中，然后在其中包含BrowserRouter？如果是这样的话，我如何重新创建由<SubmitProject/> -> <Portfol
浏览 0提问于2018-10-05得票数 0
React有一个名为Context的功能，它宣传一种存储全局可访问值的方法，而不必将它们作为道具传递下去。 我不清楚的是，与在窗口中存储值相比，这有什么优势。如果在我的页面上有window.current_user = user_details，那么所有react组件现在都可以使用用户详细信息。将其转移到React的上下文中会有什么好处？
浏览 26提问于2019-08-30得票数 5
回答已采纳
我在学习教育。我遇到useSelector钩子，它接受回调函数。回调函数的参数是存储的状态。我在这里的问题是，如何简单地从react导入useSelector钩子，从而启用与存储状态等效的回调函数的参数？该参数与存储之间的连接在哪里？
示例
import { useSelector } from 'react-redux'
export const CounterComponent = () => {
const counter = useSelector((state) => state.counter)
return <div>{count
浏览 4提问于2022-03-28得票数 1
1回答
我正在尝试创建一个基于useContext的自定义钩子useFocus，以便只将焦点设置在我选择的组件上。它可以工作，但其他组件正在呈现，甚至我也使用useCallback作为useCallback自定义钩子返回的函数。
我只想更改焦点的组件。
我知道如果代码是快速的，重新渲染可能是个小问题，但我不明白为什么要重新呈现。你能给我一些解释或者解决办法吗。
预期结果：
单击“设置焦点”按钮时，我希望得到：
1份交单/承兑书
2渲染为C/E
谢谢。
这里我的代码：
import React, { createContext, useCallback, useContext, useStat
浏览 4提问于2021-06-30得票数 5
回答已采纳
我正在尝试适应React的上下文API功能，我想要做的是在另外两个组件中使用一个组件中提供的上下文。不幸的是，当试图访问第二个上下文使用者中的上下文时， context 的值是undefined。我怎么才能解决这个问题？
Provider (snippet)
const [loginState, changeLoginState] = useState({
isAuthenticated: false,
login: () => {}
});
const loginHandler = () => {
let newState = {...login
浏览 1提问于2021-07-13得票数 1
回答已采纳
2回答
当我使用该应用程序并导航到SetContext组件时，我看到auth的值是正确的(“虚拟值”)，在编辑字段中输入一个值并按下按钮后，我在app中看到了setAuth方法触发器，然后我还看到App的useEffect方法中的auth更改(我只是把它放进去看看它是否注册了更新)。这将是非常棒的，除了导航到任何页面，auth的值将恢复到原始值(“虚拟值”)，而我无法确定原因。
下面是我使用的React库的版本：
"react": "^18.1.0",
"react-dom": "^18.1.0",
"re
浏览 5提问于2022-05-04得票数 2
我试着用我的手对TypeScript做出反应。我有一个函数组件(下面的代码)，它应该使用useContext来使用上下文，但是它向我展示了这个奇怪的错误，我找不到解决方案。
如果我不使用TS，并且使用JSX，它就能正常工作。
编辑: Screenshot>
代码：
AppProvider.tsx
import React, { useState, useEffect } from "react";
// Application's context (for general application-wide usage)
const AppContext:
浏览 0提问于2019-08-02得票数 1
回答已采纳
我希望在我的应用程序的不同部分重用上下文提供程序(“高级组件”)，但是我的状态不会被更新。
这是提供者的包装器。
import React, { FC, useState } from "react";
import AdminContext from "./adminContext";
const AdminContextWrapper: FC = ({ children }) => {
const [authAdmin, setAuthAdmin] = useState<boolean | null>(null);
cons
浏览 5提问于2022-02-17得票数 0
回答已采纳
1回答
受保护的路由和React上下文
、、、、
我有一个上下文(AuthContext)，它让我知道用户是否通过了身份验证。我还创建了一个受保护的路由，如果用户通过身份验证，则允许我登录到DashBoard，否则将重定向到登录。然而，我有一个问题，连接这两个，以便它发生在一起。
ProtectedRoute.js
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { AuthContext } from './AuthContext';
const ProtectedRo
浏览 0提问于2020-06-02得票数 0
1回答
概述
使用React.createContext()替换props，但也想知道在子component.So中发生了什么变化--我使用了生命周期componentWillReceiveProps或其他有nextContext参数的人。
现在，当我setState值和控制台nextContext或this.context，但什么也得不到{}
代码
提供程序
//I create a context to transmit data
const {Provider,Consumer} = React.createContext({visible:true});
export default cla
浏览 0提问于2019-03-20得票数 2
2回答
带反应钩的HoC
、、、
我试图用class component从react hooks移植到Context API，但我不知道得到错误的具体原因是什么。
首先，我的密码：
// contexts/sample.jsx
import React, { createContext, useState, useContext } from 'react'
const SampleCtx = createContext()
const SampleProvider = (props) => {
const [ value, setValue ] = useState('Default Va
浏览 0提问于2019-09-04得票数 6
回答已采纳
1回答
我正在尝试更新另一个组件正在使用的对象。
我的背景：
import React, {Component, createContext} from "react";
import jwt from 'jsonwebtoken';
const LOCAL_STORAGE_AUTH_TOKEN = 'authToken';
interface AuthenticatedUser {
username?: string;
guildName?: string;
guildId?: string;
}
interface Au
浏览 2提问于2021-12-06得票数 3
回答已采纳
我在从组件导出上下文时遇到问题。包含上下文的组件如下所示。
import React, { Component, createContext} from 'react';
export const MyContext = React.createContext('');
export default class ComponentOne extends Component {
....
....
render(){
return(
<MyContext.Provider value={'value1
浏览 25提问于2019-11-26得票数 4
1回答
我有一个带有全局元素(自定义游标，即鼠标后面的圆角div )的React (用CRA安装)，它的样式我想更新/更改，当悬停不同程度地嵌套不同的其他组件时(在下面提供的结构中，我只列出了一个示例组件)。据我所知，这是上下文API的一个很好的用例。
我的应用程序的结构看起来如下(简化)：
<Cursor />
<Layout>
<Content>
<Item />
</Content>
</Layout>
因此，当悬停<Item /> (以及其他组件)时，我想更新<Cursor />组件
浏览 0提问于2019-08-07得票数 2
回答已采纳
我有这个口袋妖怪api应用程序，它有一些问题，首先，当我获取口袋妖怪，它不断添加无限x口袋妖怪与1请求。其次，当我再次尝试输入一些东西时，这个应用程序就会完全冻结。代码如下：
应用程序：
import React from 'react'
import './App.css'
import {PokemonForm} from '@components/PokemonForm/PokemonForm'
import {PokemonProvider} from "@context/PokemonContext";
import {
浏览 1提问于2022-10-27得票数 0
回答已采纳
我有一个应用程序，我正在使用3 Context Provider。要使应用程序正常工作，我必须将<App/>封装在所有这些providers中。随着我的应用程序的发展，我希望有更多的供应商，为更多类型的数据，我必须连接。我已经开始感觉到可能有更好的方法将提供者传递到<App />中。
我的App.js 代码：
import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContaine
浏览 1提问于2020-03-08得票数 17
回答已采纳
我正在尝试为我的Reactjs应用程序的基本路线，包括功能组件和资料UI。我把<链接到./>在导航栏上，当点击菜单项(购物车，联系人，产品)时，页面的内容会改变(只保留页眉和页脚)。
当单击每个菜单项时，URL更改。但是页面不会更改，我必须重新加载页面进行内容更改。我不明白为什么会有这个问题。
此问题的图像和详细信息步骤:步骤1:当路径为“/”时：
步骤2:单击菜单项(我们的产品)，URL更改为"/product“，但页面不会更改：
步骤3:必须重新加载页面以查看页面内容更改为组件：
下面是我的代码和文件结构：
App.js：
import "./App.
浏览 1提问于2022-05-16得票数 2
回答已采纳
2回答
下面的代码演示了我如何尝试用react钩子实现react的上下文，这里的想法是我将能够轻松地从任何子组件中访问上下文，如以下所示
const {authState, authActions} = useContext(AuthCtx);
首先，我创建一个导出上下文和提供程序的文件。
import * as React from 'react';
const { createContext, useState } = React;
const initialState = {
email: '',
password: ''
};
co
浏览 1提问于2018-11-16得票数 9
回答已采纳
我的目标是能够有一个孩子可以访问的计时器。问题是，只有少数组件需要秒值，但许多组件需要能够操作计时器(暂停它、更改值、重置它等等)。我的解决方案是将所有的子程序封装在其中，但是每次第二次更新时，访问它的子程序仍然呈现--尽管我没有在上下文中解压秒。
这是包装器：
import * as React from 'react';
import Timer, {ITimerSettings} from '../../utilities/Timer';
export const TimerContext = React.createContext({
secon
浏览 1提问于2019-08-19得票数 3
回答已采纳
1回答
新的反应-我尝试在我的应用程序组件中使用多个上下文，我试着遵循关于的官方指南。
以下是我的当前代码：
App.js
import React from "react";
import { render } from "react-dom";
import Login from "./Login";
import AuthContext from "./AuthContext";
import LayoutContext from "./LayoutContext";
import LoadingScreen fro
浏览 0提问于2019-08-31得票数 6
回答已采纳
我正在开发这个应用程序，当我运行npm start时，我一直收到这个错误："TypeError: render is not a function“。我已经厌倦了从删除依赖项到运行npm install的所有工作。我甚至多次更新react-router-dom和react-dom。我在这里迷路了。
以下是存储库的GitHub
代码如下：
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react
浏览 0提问于2018-11-03得票数 1
1回答
我试图将一个值从上下文使用者中的一个组件传递给另一个组件，作为一个支柱，它说它是undefined。
<ReadingSessionContext.Consumer>
{(context) => {
console.dir(context.state.session.duration) // Value is printed here
return (
...
<Timer duration={context.state.session.duration} />
...
)
}}
</R
浏览 2提问于2020-03-26得票数 0
我正在使用React制作一个非常基本的程序，下面是关于的教程。不过，有一部分让我感到困惑，默认上下文中有两个属性：
import React from "react"
const defaultContext = {
markdownText: "",
setMarkdownText: () => {},
}
export default React.createContext(defaultContext)
setMarkdownText属性永远不会被实际更新，并且仍然是一个空函数。
const {setMarkdownTex
浏览 2提问于2021-03-10得票数 1
回答已采纳
2回答
我有下面的React组件，它使用自定义的资料UI主题
const getTheme = name => themes.filter(主题=> theme.name === name) \x_~_
const Root = props => (
<MuiThemeProvider muiTheme={getMuiTheme(getTheme(props.theme).data)}>
<Router history={history}>
<Switch>
<R
浏览 2提问于2017-10-04得票数 8
回答已采纳
3回答
我尝试使用React new Hooks和ActionCable，但仍然存在一个问题，即在尝试发送状态时无法在Rails中获取正确的数据。
我尝试在做完setState()后立即使用send()方法并发送更新后的数据，但由于某些原因，在Rails部分接收的数据是旧的。例如，如果我将" example“输入到输入，我会在Rails端看到"{" data "=>"Exampl"}。我认为数据更新状态的时间比我的请求更新的时间晚。如果我从e.target.value中取值，则一切正常。
因此，我尝试使用新的useEffect()钩子并在那里发送数
浏览 1提问于2019-08-09得票数 1
3回答
编辑:使用钩子解决
我一直在疯狂地做这事。我有一个问题，我必须使用道具，在另一个组件。我知道我应该使用上下文。
我遵循了一些教程，但由于某些原因，我无法将它应用到我自己的代码中。
export const FetchContinent = (props) => {
console.log(props.continent)
return (
<div>
{props.continent}
</div>
)
};
props.continent准确地记录了我想要的。
我想在另一个组件中使用这个确切的值，作为支撑。
const
浏览 8提问于2020-04-22得票数 1
回答已采纳
我的主要父组件： import React, {Component} from 'react';
import {Content} from './styles';
import {toast} from 'react-toastify';
import Steps from './Steps';
import PropertyInformation from './Information';
import Taxes from './Taxes';
import Sites from &
浏览 19提问于2020-10-14得票数 1
回答已采纳
我按照这个例子使用React Navigator创建了一个多屏幕应用程序：
import {
createStackNavigator,
} from 'react-navigation';
const App = createStackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});
export default App;
现在我想使用添加一个全局配置状态，这样我就可以拥有一些可以在多个屏幕上操作和显示的通用数据。
问题是，上下文显然需要具有公共父
浏览 1提问于2018-07-05得票数 20
2回答
我有3个React组件，它们都传递了相同的属性isNewListingsHeader。我正在使用样式组件的CSS样式。我想知道是否有一种更干净的方式将这个道具传递给3个不同样式的组件SortBarWrapper、SortOptionsWrapper和SortOptionsWrapper，这样我就不必每次都定义isNewListingsHeader了。 // Styled Components
const SortBarWrapper = styled.div`
position: relative;
${props => !props.isNewListingsHeader
浏览 24提问于2019-02-14得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
