Reactjs Apollo被动变量在导入到另一个文件时不起作用!为什么?

Reactjs Apollo被动变量在导入到另一个文件时不起作用!为什么?,reactjs,apollo,react-apollo,apollo-client,apollo-server,Reactjs,Apollo,React Apollo,Apollo Client,Apollo Server,src/other_folder/reactiveVariInitializationFile.js 从“@apollo/client”导入{makeVar} export const selectStore=makeVar(“”) //我的组件 import {Select,Spin} from "antd" import {selectStore} from "../../reactives/selectStore.RV" import {useQue

src/other_folder/reactiveVariInitializationFile.js 从“@apollo/client”导入{makeVar}

export const selectStore=makeVar(“”)

//我的组件

import {Select,Spin} from "antd"
import {selectStore} from "../../reactives/selectStore.RV"
import {useQuery} from "@apollo/client"
import FETCH_STORES from "../../queries/getStoresSelectSoreDPD"
export default function(){
    const {data}= useQuery(FETCH_STORES)
    const store = selectStore()
    const onChange=(val)=>{
        console.log(val)
        selectStore(val)
    }
    console.log(store)
    return(
    <>
        {!data?(<Spin/>):(
            <Select
                style={{width:"200px"}}
                placeholder="Select store" 
                onChange={onChange}>
                {data.currentUser.outlets.map(el=><Select.Option key={el.id} value={el.id}>{el.name} 
               </Select.Option>)}        
            </Select>
            
        )}
        <p>{store}</p>
    </>
    )
}
从“antd”导入{Select,Spin}
从“./../reactives/selectStore.RV”导入{selectStore}
从“@apollo/client”导入{useQuery}
从“../../queries/getStoresSelectSoreDPD”导入FETCH_存储
导出默认函数(){
const{data}=useQuery(获取存储)
const store=selectStore()
const onChange=(val)=>{
console.log(val)
选择存储(val)
}
console.log(存储)
返回(
{!数据?():(
{data.currentUser.outlets.map(el=>{el.name}
)}        
)}
{store}

) }
问题是,当我将selectStore导入组件时,我无法通过selectStore()获取其值,也无法通过selectStore(“新值”)修改变量


有人能帮我吗?

这个答案已经过时了,因为useReactiveVar已经启动了

如果要重新渲染,则需要在查询中使用反应变量。以下是关于它的官方文件:

顾名思义,被动变量可以触发应用程序中的被动更改。无论何时修改反应变量的值,都会刷新依赖于该变量的查询,应用程序的UI也会相应更新

所以您需要为selecStore字段编写一个读取策略。然后在查询中使用此字段,如下所示:

 const { data } = useQuery(gql`
   query GetSelectStore {
    selectStore @client
  }
 `);
const store = useReactiveVar(selectStore);

如果直接使用reactiveVar,则在值更改时它不会更新,只会在初始渲染时更新

但是,如果希望它在值更改时更新并触发重新渲染,则需要使用
useReactiveVar
hook:

比如说:

 const { data } = useQuery(gql`
   query GetSelectStore {
    selectStore @client
  }
 `);
const store = useReactiveVar(selectStore);

我不理解否决票:在引入UsereActiveVarHook之前的D;这是使用反应变量并对其更改作出反应的唯一方法。