1

所以我发现我实际上用“！”运算符修复了 5-6 个其他问题，所以不要删除重复的问题，但我不明白的是变量不是对象。这就是上下文；

import { createContext } from "react";

interface PlanetInfos {
  planetName: string;
  radius: string;
  distanceFromSun?: string;
  numberOfMoons?: string;
  averageTemperature: string;
  svg: string;
}

type ContextProps = {
  miliSeconds: number;
  setmiliSeconds: any;
  planetInfos: PlanetInfos[];
};

const PlanetContext = createContext<Partial<ContextProps>>({});

export default PlanetContext;

例如，这是我定义毫秒的 App.js；

const App: React.FC = () => {
  const [miliSeconds, setmiliSeconds] = useState(10000);

  return (
    <PlanetContext.Provider
      value={{
        miliSeconds,
        setmiliSeconds,
        planetInfos,
      }}
    >
      <div className="App">
        <SideBar />
        <Planets />
      </div>
    </PlanetContext.Provider>
  );
};

export default App;

因此，无论我在哪里执行此操作并在组件中的某处使用毫秒；

const { miliSeconds } = useContext(PlanetContext);

它说“对象可能未定义”，这对我来说没有意义。因为它从来都不是一个对象。那么除了在应用程序中随处放置感叹号之外，还有什么解决方法吗？

4

1 回答 1

2 
 createContext<Partial<ContextProps>>({});

我认为这段代码导致定义的上下文类型不等于 ContextProps，但所有对象字段都可能未定义。部分实用程序类型执行此操作。然后，即使您在使用之前在 App 组件中为上下文定义了值，打字稿对此一无所知，并从 Partical 推断出毫秒类型，因此它将是number | undefined

于 2021-03-11T19:42:18.170 回答