标签: react-context

使用 Next.js，我试图在 Context API 状态中获取数据后将它们保存在 中getInitialProps，以修复道具钻孔。

但由于getInitialProps是静态方法，我们无法通过 this.context 访问它。我设法将它们保存在 componentDidMount 中，但在这种情况下，上下文状态在第一页加载时为空，直到填充为止。不确定在这种情况下的最佳做法是什么。我应该在哪个生命周期中将初始数据保存到 Context 以便像 props 传递一样立即获得它们？

我已经构建了一个 ReactJS 组件库，用于使用 sim 链接通过 NPM 包安装的多个项目。我想使用上下文 API 将数据从组件库提供的父组件传递到我的基础项目，以便由组件库提供的多个使用者组件使用。当我尝试时，我的子组件中的上下文始终未定义。

如果我将我的消费者组件放在我的库中的提供者组件中，它就像一个冠军，但这会破坏我想要实现的目标。如果我将提供者和消费者都导出到我的基础项目，消费者将看不到提供者。

这是来自我的基础项目

import { Screen, COD, GenericSocketServer } from 'component-library'

export default class View extends React.PureComponent {
  render() {
    return (
      <Screen className="screen odmb1">
        <GenericSocketServer>
          <COD />
        </GenericSocketServer>
      </Screen>
    )
  }
}

这是从我的“组件库”导出的提供程序代码

import React from 'react';
import MyContext from "./context";
import COD from './../cod';

export default class GenericSocketServer extends React.Component {
  render() {
    return (
      <MyContext.Provider value={{ foo: 'bar' }}>
        <COD />
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

这是我在“组件库”中使用的内容代码

import React …

我正在使用新的React Context API,我需要从Context.Consumer变量中获取Consumer数据,而不是在render方法中使用它.无论如何我能做到这一点吗？

例如,我想要的是:

console.log(Context.Consumer.value);

到目前为止我测试的内容:上面的例子,测试了Context.Consumer currentValue和Context Consumer所拥有的其他变量,试图将Context.Consumer()作为一个函数执行而没有工作.

有任何想法吗？

我有一个应用程序，我在其中使用 3 Context Provider。要使应用程序正常工作，我必须将 <App/>所有这些providers. 随着我的应用程序的增长，我希望有更多的提供程序来处理我必须连接的更多类型的数据。我已经开始觉得可能有更好的方法将提供者传递到<App />.

我的App.js代码：

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import { Provider as BlogProvider} from './src/context/BlogContext';
import { Provider as VehicleProvider} from './src/context/VehicleContext';
import { Provider as AuthProvider} from './src/context/AuthContext';

import IndexScreen from './src/screens/IndexScreen';
import ShowScreen from './src/screens/ShowScreen';
import CreateScreen from './src/screens/CreateScreen';
import EditScreen from './src/screens/EditScreen';
import VehicleScreen from './src/screens/VehicleScreen';

const navigator = createStackNavigator(
  {
    Index: IndexScreen, …

第一次使用 Context API，请耐心等待。

我有一个本地 JSON 文件，我试图从中获取响应并将响应放入 Context API 中，以便我可以在应用程序中全局使用。

在本地运行应用程序时，出现空白屏幕，并且页面似乎无法加载。该页面处于无限循环中，因此我看不到它是否正在加载。

代码沙箱在这里。

知道我可以更改什么才能将数据响应成功引入 Context API？

apiContext.js：

import React, { useContext, useState, useEffect, createContext } from "react";
import axios from "axios";

const APIContext = createContext();

function APIContextProvider({ children }) {
  // Initialize state
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  // Fetch data
  useEffect(() => {
    let url = "../db.json";
    axios
      .get(url)
      .then(function (response) {
        setData(response.data.machines);
        setIsLoading(false);
        console.log(response.data.machines);
      })
      .catch((error) => console.log(error));
  }, []);

  return (
    <APIContextProvider …

我一直在尝试理解新的React Context API并且正在玩它.我只是想检查一个简单的案例 - 当更新数据到提供者时,所有重新呈现的内容.

在Codesandbox上查看这个小例子

所以,在我的例子中,我有一个App组件 - 具有类似这样的状态 -

this.state = {
  number - A random number
  text - A static text
} 

我从这里创建一个新的React Context包含number和text来自state并将值传递给两个使用者Number和Text.

所以我的假设是如果随机数更新,它将改变上下文,并且两个组件都应该触发重新渲染.

但实际上,价值正在更新,但没有重新发生.

所以,我的问题 -

1. 对上下文的更新是否不会通过因使用的rerenders传播？因为当上下文改变时我看不到我的日志/颜色变化.

2. 是否更新了该提供商的所有消费者？

我按照这个例子使用React Navigator创建了一个多屏幕应用程序:

import {
  createStackNavigator,
} from 'react-navigation';

const App = createStackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});

export default App;

现在我想使用新的内置上下文api添加一个全局配置状态,因此我可以使用一些可以在多个屏幕上操作和显示的公共数据.

问题是上下文显然需要具有共同父组件的组件,以便上下文可以向下传递给子组件.

我如何使用不知道共享父母的屏幕来实现这一点,因为它们是由react navigator管理的？

我使用带有钩子的 React 上下文作为我的 React 应用程序的状态管理器。每次 store 中的值发生变化时，所有组件都会重新渲染。

有没有办法阻止 React 组件重新渲染？

店铺配置：

import React, { useReducer } from "react";
import rootReducer from "./reducers/rootReducer";

export const ApiContext = React.createContext();

export const Provider = ({ children }) => {
  const [state, dispatch] = useReducer(rootReducer, {});

  return (
    <ApiContext.Provider value={{ ...state, dispatch }}>
      {children}
    </ApiContext.Provider>
  );
};

减速器的一个例子：

import * as types from "./../actionTypes";

const initialState = {
  fetchedBooks: null
};

const bookReducer = (state = initialState, action) => {
  switch (action.type) {
    case …

我搜索了一个答案但找不到任何答案，所以我在这里问，我有一个更新上下文的消费者，另一个应该显示上下文的消费者。我正在使用与打字稿（16.3）的反应

上下文（AppContext.tsx）：

export interface AppContext {
    jsonTransactions: WithdrawTransactionsElement | null;
    setJsonTran(jsonTransactions: WithdrawTransactionsElement | null): void;
}

export const appContextInitialState : AppContext = {
    jsonTransactions: null,
    setJsonTran : (data: WithdrawTransactionsElement) => {
        return appContextInitialState.jsonTransactions = data;
    }
};

export const AppContext = React.createContext(appContextInitialState);

生产者（App.tsx）：

interface Props {}

class App extends React.Component<Props, AppContext> {

  state: AppContext = appContextInitialState;

  constructor(props : Props) {
    super(props);
  }

  render() {
    return (
        <AppContext.Provider value={this.state}>
          <div className="App">
            <header className="App-header">
              <SubmitTransactionFile/>
              <WithdrawTransactionsTable />
            </header>
          </div>
        </AppContext.Provider>
    );
  } …

我正在尝试使用一个小吃栏组件，该组件采用 open 和 message 属性，并且可以从应用程序的任何页面显示（将 open 设置为 true）。

据我了解，我应该使用 Context。但我不太确定从哪里开始。

这就是我到目前为止所拥有的

我希望将小吃栏放在最高的父组件上

import { createContext } from 'react';

export const SnackbarContext = createContext({});

 const [snack, setSnack] = useState({
    message: '',
    color: '',
    open: false,
  });

<SnackbarContext.Provider value={{ snack, setSnack }}>
  <Snackbar open={snack.open}>
    <Alert>
      {snack.message}
    </Alert>
  </Snackbar>
  <ViewContainer>
    <Switch>{switchRoutes}</Switch>
  </ViewContainer>
</SnackbarContext.Provider>

并能够从任何子组件调用它

import { SnackbarContext } from 'SnackbarContext';

const { snack, setSnack } = useContext(SnackbarContext);

然后像这样将道具更改为snackbar

setSnack({ message: 'hello', open: true})