小编And*_*son的帖子

如何在单独安装的组件树之间共享 React 上下文状态

我知道 React Context 对于跨深层组件树共享状态很有用,而无需进行道具钻取。但是,我找不到在多个单独的组件树之间共享相同上下文值的好方法。我工作的应用程序不是真正的 React 前端;相反,它在整个页面中散布了一些 React 树。我想使用上下文在他们之间共享状态。我知道 Redux 可以处理这个问题,但我尽量避免使用它。

// counter-context.jsx
import React, { useState, createContext } from 'react';

const CounterContext = createContext();

const CounterContextProvider = ({ children }) => {
  const [counter, setCounter] = useState(0);

  function increment() {
    setCounter(counter + 1);
  }

  return (
    <CounterContext.Provider value={{ counter, increment }}>
      {children}
    </CounterContext.Provider>
  );
};

export { CounterContextProvider, CounterContext };

// FirstComponent.jsx
import React, { useContext } from 'react';
import { render } from 'react-dom'; 

import { CounterContextProvider, CounterContext } …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

8
推荐指数
1
解决办法
601
查看次数

React + Apollo:GraphQL错误数组未传递到组件中

根据这些阿波罗文档,设置一个error-policyall应使errors一个GraphQL响应提供给阵列我的阿波罗包裹阵营部件"所以(我的)UI可以使用它们." 我的应用程序是通用的,因此我使用此策略非常重要,因此错误不会阻止应用程序完全呈现.

问题是,即使我的浏览器开发工具errors在服务器响应中显示数组,我也无法在我的React组件的道具中访问它.同样,props.data.error总是未定义.为什么是这样?

// Component
import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

const Cart = (props) => {
  console.log(props.errors); // undefined
  console.log(props.data.error); // undefined
  console.log(props.data.cart); // null

  return <div>Foo.</div>;
};

export default graphql(gql`
  query CartQuery {
    cart {
      products {
        _id,
        name
      }
    }
  }
`, { options: { errorPolicy: 'all' } })(Cart);


// Resolver
cart: (root, args, context) => { …
Run Code Online (Sandbox Code Playgroud)

javascript apollo graphql react-apollo

6
推荐指数
1
解决办法
293
查看次数

标签 统计

javascript ×2

apollo ×1

graphql ×1

react-apollo ×1

reactjs ×1