我正在將 app.js 檔案更改為 app.tsx。
目前，該值有以下錯誤。
app.tsx
import React, { createContext, useState } from "react";
import SelectPage from "./pages/select/select";
import ResultPage from "./pages/result/result";
import { Route, Routes } from "react-router-dom";
export const GlobalContext = createContext(null);
function App() {
const [checkCrypto, setCheckCrypto] = useState([]);
const [start, setStart] = useState(false);
const value = {
checkCrypto,
setCheckCrypto,
start,
setStart,
};
return (
<>
<GlobalContext.Provider value={value}>
<Routes>
<Route path="/" element={<SelectPage />} />
<Route path="/result" element={<ResultPage />} />
</Routes>
</GlobalContext.Provider>
</>
);
}
export default App;
當我像下面的代碼一樣改變它時，它解決了，但我想找到另一種方法。
export const GlobalContext:any = createContext(null);
我應該申請什么型別來解決問題？
uj5u.com熱心網友回復：
我是這樣解決的。
interface AppContextInterface {
checkCrypto: number[];
start: boolean;
}
export const GlobalContext = createContext<AppContextInterface | null>(null);
function App() {
const [checkCrypto, setCheckCrypto] = useState([]);
const [start, setStart] = useState(false);
const value = {
checkCrypto,
setCheckCrypto,
start,
setStart,
};
return (
<>
<GlobalContext.Provider value={value}>
<Routes>
<Route path="/" element={<SelectPage />} />
<Route path="/result" element={<ResultPage />} />
</Routes>
</GlobalContext.Provider>
</>
);
}
export default App;
uj5u.com熱心網友回復：
根據您顯示的代碼，這應該可以作業。
如果您訪問 TypeScript playground 鏈接并將滑鼠懸停value在第 14 行，您可以看到您需要用作createContext.
TS游樂場
export const GlobalContext = createContext<{
checkCrypto: number[];
setCheckCrypto: React.Dispatch<React.SetStateAction<number[]>>;
start: boolean;
setStart: React.Dispatch<React.SetStateAction<boolean>>;
}>(undefined as any);
function App() {
const [checkCrypto, setCheckCrypto] = useState<number[]>([]);
const [start, setStart] = useState(false);
const value = {
checkCrypto,
setCheckCrypto,
start,
setStart,
};
// ...
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/397924.html
下一篇：計算自定義游標之間的正確間隙