userContext实现失败

Question

我有一个关于userContext在react与typescript的问题。

首先我在RubroContext.tsx

中定义它

import { createContext, useContext } from "react";
import { RubroType1, RubroType2 } from "../Interfaces/interfaces";
export const  RubroContext1 = createContext <Partial<RubroType1>>({})
export const  RubroContext2 = createContext <Partial<RubroType2>>({})
export const useRubroContext1 = () => useContext(RubroContext1);
export const useRubroContext2 = () => useContext(RubroContext2);

这是interfaces.tsx

export type RubroType1 = {
rubrosItem1 : itemRubro;
setItemRubro1: Dispatch<SetStateAction<itemRubro >>;
}
export type RubroType2 = {
rubrosItem2 : itemRubro;
setItemRubro2 : Dispatch<SetStateAction<itemRubro >>;
}

，这就是我在组件

中实现它的方式

const CompletarRubros = (props:{setIsReg:any,email:any, clientType:any}) => {

const {rubrosItem1,setItemRubro1} = useRubroContext1 () 
const {rubrosItem2,setItemRubro2} = useRubroContext2 () 
const rubro = useRef ("first") 
const radius = useRef (1) 
const description = useRef ("test") 

useEffect(() => {
setItemRubro1!({ 
rubro:rubro.current,
radius:String(radius),
description:descripcion.current,
calificacion:0,
})

}, []);

//...........
}

问题是代码没有更新。当我想在其他组件中访问rubrosItem1时，应该保存在useEffect中的信息不存在。我做错了什么?

例如在另一个组件

中

const Test= () => {
const {rubrosItem1,setItemRubro1} = useRubroContext1 () 
useEffect(() => {

console.log(rubrosItem1.rubro) 

// it does not show anything

}, []);

}

Answer 1

您应该创建一个RubroContext1Provider组件，并将上下文值声明为其本地状态。以便RubroContext1Provider组件的子组件和共享上下文值(存储在其状态中)。

。

RubroContext.tsx:

import {
createContext,
Dispatch,
SetStateAction,
useContext,
useState,
} from 'react';
import * as React from 'react';
type itemRubro = any;
export type RubroType1 = {
rubrosItem1: itemRubro;
setItemRubro1: Dispatch<SetStateAction<itemRubro>>;
};
export type RubroType2 = {
rubrosItem2: itemRubro;
setItemRubro2: Dispatch<SetStateAction<itemRubro>>;
};
export const RubroContext1 = createContext<Partial<RubroType1>>({});
export const RubroContext2 = createContext<Partial<RubroType2>>({});
export const useRubroContext1 = () => useContext(RubroContext1);
export const useRubroContext2 = () => useContext(RubroContext2);
export const RubroContext1Provider = ({ children }) => {
const [value, setValue] = useState();
return (
<RubroContext1.Provider
value={{
rubrosItem1: value,
setItemRubro1: setValue,
}}
>
{children}
</RubroContext1.Provider>
);
};

CompletarRubros.tsx:

import { useEffect, useRef } from 'react';
import { useRubroContext1 } from './RubroContext';
export const CompletarRubros = () => {
const { rubrosItem1, setItemRubro1 } = useRubroContext1();
const rubro = useRef('first');
const radius = useRef(1);
const description = useRef('test');
useEffect(() => {
setItemRubro1({
rubro: rubro.current,
radius: String(radius),
description: description.current,
calificacion: 0,
});
}, []);
return null;
};

Test.tsx:

import { useRubroContext1 } from './RubroContext';
export const Test = () => {
const { rubrosItem1 } = useRubroContext1();
console.log('[Test]:', rubrosItem1?.rubro);
return null;
};

App.tsx:

import * as React from 'react';
import { CompletarRubros } from './CompletarRubros';
import { RubroContext1Provider } from './RubroContext';
import './style.css';
import { Test } from './Test';
export default function App() {
return (
<div>
<RubroContext1Provider>
<CompletarRubros />
<Test />
</RubroContext1Provider>
</div>
);
}

控制台日志:

[Test]:undefined
[Test]:undefined
[Test]:first
[Test]:first

stackblitz