javascript 为什么需要在上下文中声明两次

oalqel3c  于 2023-02-18  发布在  Java
关注(0)|答案(1)|浏览(147)

我刚刚开始学习TypeScript,并且一直在开发一个小型的Web应用程序。
由于状态管理,我创建了一个名为CountdownContext.tsx的文件

import { useState, createContext, useContext, SetStateAction } from "react";
import { CountdownContextType } from "./types";

const CountdownContext = createContext({});

export const useCountdownContext = () => {
  return useContext(CountdownContext) as CountdownContextType;
};

// React.useContext(TodoContext) as TodoContextType;

interface Props {
  children: React.ReactNode;
}

export const CountdownContextProvider: React.FC<Props> = ({ children }) => {
  const [eventDate, setEventDate] = useState<Date>(new Date());

  function handleEventDate(e: React.ChangeEvent<HTMLInputElement>) {
    setEventDate(new Date(e.target.value));
  }

  return (
    <CountdownContext.Provider value={{ eventDate, handleEventDate }}>
      {children}
    </CountdownContext.Provider>
  );
};

我在下面的文件中导入了eventDate和handleEventDate。

import React, { useState } from "react";
import { useCountdownContext } from "../../contexts/CountdownContext";
type Props = {
  activeEdit: boolean;
};

const EventDate: React.FC<Props> = ({ activeEdit }) => {
  const { eventDate, handleEventDate } = useCountdownContext();
  
  return (
    <div>
      {activeEdit ? (
        <input type="date" onChange={(e) => handleEventDate(e.target.value, typeof new Date(e.target.value))} />
      ) : (
        <div>{eventDate}</div>
      )}
    </div>
  );
};

export default EventDate;

但是,我在导入时遇到了一个错误,在搜索了有关问题发生的情况后,我发现我需要声明类型。
然后我创建了一个文件

export type CountdownContextType = {
  eventDate: Date;
  handleEventDate: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

但是,有一个问题是,我以为我已经在上下文文件中为eventDate和handleEventDate提供并声明了类型。
因此,我想问为什么我要做两次?
请给予我澄清一下这个问题。谢谢你的好意和帮助。

yvgpqqbh

yvgpqqbh1#

不使用类型的一种方法是为上下文创建初始值,如下所示:

import * as React from "react";
import ReactDOM from "react-dom";
import { useState, createContext, useContext } from "react";

const initialValue = {
  eventDate: new Date(),
  handleEventDate: (e: React.ChangeEvent<HTMLInputElement>) => {},
};

const CountdownContext = createContext(initialValue);

const useCountDownState = () => {
  const [eventDate, setEventDate] = useState<Date>(new Date());

  function handleEventDate(e: React.ChangeEvent<HTMLInputElement>) {
    console.log("setting date");
    setEventDate(new Date(e.target.value));
  }
  return { eventDate, handleEventDate };
};

const CountdownContextProvider = ({ children }: { children: JSX.Element }) => {
  return (
    <CountdownContext.Provider value={useCountDownState()}>
      {children}
    </CountdownContext.Provider>
  );
};

const useCountdownContext = () => useContext(CountdownContext);

const EventDate = ({ activeEdit }: { activeEdit: boolean }) => {
  const { eventDate, handleEventDate } = useCountdownContext();

  return (
    <div>
      {activeEdit ? (
        <input type="date" onChange={handleEventDate} />
      ) : (
        <div>{eventDate.toDateString()}</div>
      )}
    </div>
  );
};

function App() {
  return (
    <CountdownContextProvider>
      <EventDate activeEdit />
    </CountdownContextProvider>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

该准则的灵感主要来自:https://youtu.be/P95DuIBwnqw?t=822
下面是链接的源代码:https://github.com/jherr/which-react-state-manager/blob/main/examples/hooks-context/src/store.tsx

相关问题