标签: react-context

考虑以下场景：

import React, { Component } from 'react';
import LocaleService from '../Services/LocaleService.js';

const defaultStore = {
    loaded: false,
    locales: []
};

const LocalesContext = React.createContext(defaultStore);
class LocalesProvider extends Component
{
    state = defaultStore;

    load() {
        const service = new LocaleService(), that = this;
        service.fetch().then(function (locales) {
            that.setState({ locales: locales, loaded: true });
        });
    }

    data() {
        return this.state;
    }

    componentDidMount() {
        this.load();
    }

    render() {
        return (
            <LocalesContext.Provider value={this.data()}>
                {this.props.children}
            </LocalesContext.Provider>
        );
    }
}

export default LocalesProvider;

import React, { …

我正在尝试更流畅地了解 React 如何传递信息，并且出现了这个测试用例：

我有一个由 Canvas 对象和无限数量的孩子组成的组件。我想让孩子们访问这个组件的画布上下文。

我想知道我是否可以给组件一个带有画布上下文的 React Context 并用它包装孩子，然后让各个孩子选择成为消费者。然而，我不习惯 React 或其生命周期，不知道如何正确地做到这一点。我是不是彻底没了？这甚至可能吗？

这是有问题的组件：

const CanvasContext = React.createContext('default');
class Screen extends React.Component
{    

  render(){

    return (<div>
              <canvas id="myCanvas" ref={(c) => this.context = c.getContext('2d')} width="200" height="100" style={{border: '1px solid black'}}></canvas> 
              <CanvasContext.Provider value = {this.context}>{this.props.children}
              </CanvasContext.Provider>
          </div>);

  }
}

现在，它包含一个孩子：

class Test extends React.Component{

  render(){
    return <CanvasContext.Consumer>{ctx => {
              ctx.moveTo(0, 0);
              ctx.lineTo(200, 100);
              ctx.stroke();}}
          </CanvasContext.Consumer>;   
  }
}
ReactDOM.render(<Screen><Test/></Screen>, document.getElementsByClassName('container-fluid')[0]);

对此的帮助将不胜感激。

编辑：这是一个 Codepen：https ://codepen.io/ejpg/pen/XqvGdp

我试图在我的应用程序中使用新的Context API，并且看起来每次更新上下文时，它都会重新渲染与其连接的任何组件。我有一个沙盒演示设置，可以查看代码和工作问题。当您输入内容时-按钮上下文将呈现，反之亦然。我最初的想法是，如果您输入输入内容，那么只会打印出输入内容。

演示

这是如何运作的还是我错过了什么？谢谢，斯宾塞

我正在尝试将子组件的状态传递给App.js文件。为此，我想使用新的上下文API。

但是我读到这是行不通的，因为如果值动态更改，则提供者必须是使用者的父母。

就我而言，我不需要动态更改它，我只想将状态传递给使用者。子组件的状态不会更改，因此如果以后不更改也不会有问题。

是否可以将状态从传递BlogPost.js到App.js？如果有使用上下文API的替代方法，那也可以。

我的代码：

App.js：

import BlogPost from './containers/BlogPost/BlogPost';

import { MediaContext } from './containers/BlogPost/BlogPost.js'

class App extends Component {

  render() {


      return (
          <div>
              <BlogPost />
              <MediaContext.Consumer>
                {value => 
              console.log(value)}
          </MediaContext.Consumer>
      </div>
    );
  }
}

export default App

BlogPost.js： 应通过此组件的状态。如果我在React.createContext('hello')其中定义上下文，则可以。但是我不能在那里定义状态。

export const MediaContext = React.createContext();

class BlogPost extends Component {
    state = {
        title: "title",
        image: {
            src: "link",
            alt: "alt,
            credits: "Unsplash",
        },
        text: "Text Text Text",
        media: { …

我正在学习一些新近引入的React.Context API，但是我注意到各个示例在使用它方面存在一些不一致之处。一些使用原始的Context.Consumer HOC方法，而某些（包括React Docs）使用静态的Class.contextType方法。有什么区别？为什么不一致？

我有这个 .js 片段，我需要将其转换为 Typescript。

import React from 'react';

const FirebaseContext = React.createContext(null)

export const withFirebase = Component => props => (
    <FirebaseContext.Consumer>
        {firebase => <Component {...props} firebase={firebase} />}
    </FirebaseContext.Consumer>
)

export default FirebaseContext

我最好的猜测是

const FirebaseContext = React.createContext(null)

export const withFirebase = (Component: React.ComponentClass) => (props: any) => (
    <FirebaseContext.Consumer>
        {firebase => <Component {...props} firebase={firebase} />}
    </FirebaseContext.Consumer>
)

但是当我尝试使用上下文时 – 通过传递一个new Firebase()：

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import * as serviceWorker from './serviceWorker'; …

我的 React 应用程序要求在 Context API 中存储 API 驱动的数据。类函数不仅仅是我们正在使用的功能组件。

我尝试将 await 与 fetch 调用一起使用，但没有成功

const App = props => {
  const { initState } = props
  return (
    <AppContextProvider  initState={initState}>
      <HoldingDetailsContainer initState={initState} />
    </AppContextProvider>
  )
}

const AppContextProvider = (props) => { 
    const { resources } = useGetResourceApi();


    const context = {
        resources 
    };
    return (
        <AppContext.Provider value={context}>
            {props.children}
        </AppContext.Provider>
    )
}

如果我在前面使用 await，useGetResourceApi它会抛出错误“对象作为 React 子对象无效（找到：[object Promise]）。如果您打算渲染子对象集合，请改用数组。”

是否可以在上下文 API 中存储 API 驱动的数据

我刚刚创建了一个包含表达式的函数组件const [state, setState] = useState()。现在我可以访问state和setState()，这个有状态的函数组件与有状态的类组件非常相似。我只知道这个组件和典型的类组件之间有两个区别：在引用状态时，我们必须使用state.handle而不是this.state.handle，并且我们可以轻松访问render方法之外的 Context API 。

除了我已经发现的差异之外，这个有状态的函数组件和有状态的类组件有什么区别吗？我的上述断言不正确吗？

稍微细化一下这个问题，有什么是类组件可以做而带有 Hooks 的函数组件不能做的吗？

im trying to create an api request with the header value, that is received from a context component. However, as soon as the page component is loaded, it throws an Cannot read property '_id' of null exception. Is there a way to run the useEffect function, as soon as the context is loaded?

main component:

import React, { useState, useEffect, useContext } from "react";
import "./overview.scss";

/* COMPONENTS */;
import axios from 'axios';
import { GlobalContext } from '../../components/context/global';

const …

我正在使用 React 开发一个网络应用程序，这是我想要做的：

1. 在最高阶组件中，检查用户是否已登录，如果已登录，则更新“userinfo”上下文值。
2. 在 Profile.js 中，获取“userinfo”上下文值。
3. 检查 'userinfo' 是否为空，并相应地调用不同的 API。

我写了下面的代码。问题是将 userinfo 上下文值传递给组件显然存在时间延迟。因此，当使用 useEffect() 钩子时，当 userinfo 不为 null 时，Profile.js 将呈现两次。

有没有办法修复此代码，使其等待 'userinfo' 变量，然后相应地调用相关 API，而不是之前？

下面是代码。有什么建议吗？非常感谢！

import React, {useEffect, useContext} from 'react';
import Userinfo from "../context/Userinfo";


function Profile(props) {

   const {userinfo, setuserinfo}=useContext(Userinfo);

   useEffect(()=>{      
       ((userinfo==null)?
       /*API call A (When user is not logged in) */ :
       /*API call B (When user is logged in) */
       )},[userinfo])  

   return (
       (userinfo==null)?
       /*Elements to render when user is not logged in) */ :
       /*Elements …