typescript userContext实现在写入时失败

6rqinv9w 于 2022-11-30 发布在 TypeScript

关注(0)|答案(1)|浏览(91)

我有一个关于userContext与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);

这是接口.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
     
   }, []);
   
}

typescript

来源：https://stackoverflow.com/questions/74602762/usercontext-implementation-faild-in-writting

1条答案

按热度按时间

mwyxok5s1#

你应该创建一个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

赞(0）回复(0）举报 2022-11-30

我来回答

typescript userContext实现在写入时失败

1条答案

相关问题

热门标签

最新问答