我知道 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) 根据这些阿波罗文档,设置一个error-policy的all应使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)