标签: react-context

我正在使用 react 并正在为我的项目尝试新的上下文 API，这是一个“Reddit 克隆”。所以，我Context在一个名为文件中创建provider.js这是在src旁边的文件夹App.js。现在，我HeaderComponent在它自己的文件夹中创建了一个，它Context以以下方式导入：

import Context from '../provider'

我LoginComponent在HeaderComponent. 而且，LoginComponent它在它自己的文件夹中。现在，我Context通过以下方式导入：

import Context from '.../provider'

在../进口工作得很好，但.../进口抛出和错误。

编译失败。

./src/HeaderComponent/LoginComponent/index.js Module not found: Can't resolve '.../provider' in 'C:\Users.......\reddit\reactfe\src\HeaderComponent\LoginComponent'

我有一个名为的 React 类GlobalDataProvider：

import React, { Component } from 'react';

const DataContext = React.createContext();
export default DataContext;

export class DataProvider extends Component {

  state = {
     title: 'Some title'
  }

  render() {
   return (
     <DataContext.Provider 
       value={{state: this.state}}>
       {this.props.children}
     </DataContext.Provider>
    )}
}

我正在尝试使用另一个文件“PageSection.js”中的数据，如下所示：

import React from 'react';
import DataContext from '../data/GlobalDataProvider';

const PageSection= () =>{

return (
    <section className="page-section">
        <DataContext.Consumer>
            {(context) => (
                <h1>{ context.state.title }</h1>
            )}
        </DataContext.Consumer>
    </section>
 );
};

然而，由于某种原因，这不起作用。我收到此错误消息：

TypeError: Cannot read property 'state' of undefined, …

我正在制作一个指导我部分.本指南的部分内容 - 显示一系列流程.每个进程内都有一个步骤数组,每个步骤中都有一个选项数组.用户从其中一个步骤中选择一个选项,将它们带到下一个相关步骤.如果用户在步骤2中选择了该选项,则可以将它们带到步骤3或返回步骤1.这取决于id.

尽管如此,我的过程中有一些问题在改变我.我正在使用React Context作为全局状态.当用户选择一个选项时,我抓住那个id,然后通过该id过滤指定的对象.所以我只能留下具有该特定步骤的流程.发生的事情是我最初的全球状态正以某种方式发生变异.我在这里错过了一些东西,因为我是React的新手.

Ps - 我现在没有使用任何服务,所以我只是将一些JSON复制到context.js中的初始状态

context.js

import React, { Component } from 'react'
// import axios from 'axios'

const Context = React.createContext()
const reducer = (state, action) => {
    switch(action.type){
        case 'SEARCH_PROCESS':
        return {
            ...state,
            guides: action.payload
        }
        default:
        return state
    }
}

export class Provider extends Component {

    state = {
        guides: [
            {
                "processName": "Support Messaging",
                "steps": [{
                    "id": "15869594739302",
                    "title": "step one", 
                    "options": [{
                        "nextStep": "4767fn-47587n-2819am-9585j,04956840987", 
                        "text": "Option 1 text", 
                        "type": "option"
                      },
                      { …

我很难理解使用React Context API的新方法。我有一个带有自定义类Firebase的应用程序。现在我想勾住它。在我使用HOC （高阶组件）和上下文之前。

我的问题

1. 我需要使用HOC还是一种新方法？
2. 我需要Context.Provider还是新的Hook？
3. 我需要将默认值声明为null还是可以从context.js中正确传递对象
4. 如何在我的代码中使用新的Hook代替HOC？

这是我的代码，其中包含与问题相关的一些注释

// context.js this is my hoc
// index.jsx
import App from './App'
import Firebase, { FirebaseContext } from './components/Firebase'

const FirebaseContext = React.createContext(null)

export const withFirebase = Component => (props) => {
  // I don't need to wrap it to the FirebaseContext.Consumer
  // 1 But do I need this HOC or it's a new way?
  const firebase = useContext(FirebaseContext)
  return <Component {...props} firebase={firebase} />
}

ReactDOM.render(
  // 2 …

我正在使用useReducer钩子来管理我的状态，但在我的上下文提供程序中读取更新状态似乎有问题。

我的上下文提供程序负责获取一些远程数据并根据响应更新状态：

import React, { useEffect } from 'react';
import useAppState from './useAppState';


export const AppContext = React.createContext();

const AppContextProvider = props => {
  const [state, dispatch] = useAppState();

  const initialFunction = () => {
    fetch('/some_path')
      .then(res => {
        dispatch({ type: 'UPDATE_STATE', res });
      });
  };

  const otherFunction = () => {
    fetch('/other_path')
      .then(res => {
        // why is `state.stateUpdated` here still 'false'????
        dispatch({ type: 'DO_SOMETHING_ELSE', res });
      });
    }
  };

  const actions = { initialFunction, otherFunction }; …

我正在尝试使用React Context管理我的项目的状态，但是当我成功尝试其他项目时，这次似乎无法使其适用于我的CRA代码库。useContext返回undefined，所以我无法访问上下文中的值，但是我再次检查了我的Provider是否在我的应用程序根级别。感谢任何帮助。

这是我简化的App组件：

import React, { useContext } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';

import { PlayerContextProvider, PlayerContext } from 'contexts/PlayerContext';

const App = () => (
  <PlayerContextProvider>
    <Test />
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
      </Switch>
    </Router>
  </PlayerContextProvider>
);

const Test = () => {
  const values = useContext(PlayerContext);
  console.log('test values', values); // returns undefined!

  return <div>Hello World</div>;
};

export default App;

这是我的情况：

import React, { useState, createContext …

我有一个 Provider 组件，它的值通过钩子导出。

我所描述的简单实现是这样的：

// SomeProvider.jsx
const SomeContext = React.createContext(null);

function SomeProvider(props) {
  const [state, setState] = useState(null)

  useEffect(() => {
    //some logic
    setState(newValue)
  }, [props.someValue])

  return <SomeContext.Provider value={state} {...props} />;
}

const useSome = () => React.useContext(SomeContext);

export { SomeProvider, useSome };

现在，如果我想在多个地方使用这个上下文提供者怎么办？例如

// App.jsx
<SomeProvider someValue={valueOne}>
  <SomeComponent />
</SomeProvider>
<SomeProvider someValue={valueTwo}>
  <SomeOtherComponent />
</SomeProvider>

哪里valueOne和valueTwo可能会发生变化

// SomeComponent.jsx
import { useSome } from 'SomeProvider';

function SomeComponent() {
  const someValue = useSome();

  return ....
}

// …

我真的很难等待状态更改。我正在使用反应钩子和上下文。

基本上，我有一个自定义下拉列表，这里没有使用表单元素。单击时，它将运行一个函数来更改两个参数的状态：

// IdeaFilters.js
const organizationContext = useOrganization();
const { organization, filterIdeas, ideas, loading } = organizationContext;

const [filter, setFilter] = useState({
    statusId: "",
    orderBy: "voteCount"
  });

  // Build the parameters object to send to filterIdeas
  const onClick = data => {
    setFilter({ ...filter, ...data });
    filterIdeas(filter);
  };

所以onClick附加到渲染方法中的下拉列表：

First dropdown:
<Dropdown.Item onClick={() => onClick({ orderBy: "popularityScore" })}>Popularity</Dropdown.Item>

Second dropdown:
<Dropdown.Item key={status.id} onClick={() => onClick({ statusId: status.id })}>
  {status.name}
</Dropdown.Item>

fetchIdeas()基本上运行一个在我的上下文中可用的函数，它为我的 axios 请求构建这些参数。每次单击时，都需要单击两次才能运行该想法。有时它会按预期运行，但大多数时候需要单击两次。

我遇到这个问题的任何原因？

任何帮助将不胜感激！

我正在尝试了解 React 上下文 API，并且正在阅读官方文档。如果有人可以对以下几点进行更多说明，我将不胜感激，因为官方文档没有明确说明。

1. 使用 Provider 提供的值的 contextType 和 Consumer 方法有什么区别？在什么情况下我们应该使用哪种方法？
2. Provider 在基于类的组件中公开的值是否可以由使用 useContext 的 React 钩子组件使用？我有相同的设置，我最终将 useContext 转换为 Context.Consumer。
3. 我有一个非常简单的设置，其中我有一个基于 Provider 类的组件，它暴露了一些状态值。Provider 只有一个子组件，它也是消费者。当我在孩子中使用 Context.Consumer 来获取值时，一切都按预期工作。但是当我在子组件中使用 contextType 时，我看到一个空对象。

上下文提供者.js

import React from "react";
import {ContextConsumer} from "./ContextConsumer";
export const TestContext = React.createContext({
    count: 1,
    incrCount: (count)=>{
     console.log(`count value :- ${count}`)
     }
});

export class ContextProvider extends React.Component {
  incrCount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  state = {
    count: 5,
    incrCount: this.incrCount,
  };

  render() { …

我在官方的 next.js 示例中发现了这一点，state并且dispatch将信息放在了单独的上下文提供程序中。

这样做的意义何在？这种做法是否可以防止不必要的重新渲染？

export const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <CounterDispatchContext.Provider value={dispatch}>
      <CounterStateContext.Provider value={state}>
        {children}
      </CounterStateContext.Provider>
    </CounterDispatchContext.Provider>
  )
}

export const useCount = () => useContext(CounterStateContext)
export const useDispatchCount = () => useContext(CounterDispatchContext)