我正在徹底檢查我正在處理的應用程式的狀態管理，并嘗試使用背景關系提供程式對其進行設定。我只需要跟蹤有限數量的狀態，而且它是一個相對較小的應用程式，因此背景關系似乎很合適，并且是推薦的解決方案。我已經閱讀了有關 react 的檔案，但其中一些不是很清楚，因為它是使用類組件撰寫的。我也對 stackoverflow 做了一些閱讀以了解類似的實作，但是代碼在答案之間不一致，所以我只是將我最好的版本組合在一起來理解該工具。
我想我可能弄錯了一些相對明顯的東西，但我還不確定是什么。任何見解表示贊賞。我的直覺是我只是錯誤地構建了一些東西，但我不確定是什么。
當前應用程式當前控制臺：
Cannot access 'cards' before initialization
at App (App.jsx:30:1)
這是 App.jsx：
import { useState, useEffect, useContext } from "react";
import "./styles/App.css";
import FileHandler from "./Components/fileHandler";
import ImagePreviewer from "./Components/ImagePreviewer";
import { Header } from "./Components/Header";
import { Comparison } from "./Components/Comparison";
import { Table } from "./Components/Table";
import { backgroundQuery } from "./Components/backgroundQuery"
import { Footer } from "./Components/Footer";
import { DBContainer } from "./Components/DatabaseFunctions/DBContainer";
import { CardsContext } from "./Components/AppContext"
function App({user}) {
const context = useContext(CardsContext);
const [cards, setCards] = context[cards]
const [previewCard, setPreviewCard] = context[previewCard]
const [comparisonCards, setComparisonCards] = context[comparisonCards]
const [userDBCards, setUserDBCards] = context[userDBCards];
const [cardInput, setCardInput] = context[cardInput]
const [background, setBackground] = useState([]);
useEffect(() => {
backgroundQuery()
.then(data => {
setBackground(data.image_uris.art_crop);
})
.catch(error =>
console.log(error.message));
}, [setBackground]);
//insert user token into database
return (
<div id="master-div" className=".container" style={{
backgroundImage: `url(${background})`,
}}>
<Header
background={background}
setBackground={setBackground}
cards={cards}
user={user}
/>
<FileHandler
cardInput={cardInput}
setCardInput={setCardInput}
previewCard={previewCard}
setPreviewCard={setPreviewCard}
cards={cards}
setCards={setCards}
setComparisonCards={setComparisonCards}
user={user}
/>
<div className="main-container">
<Comparison
user={user}
userDBCards={userDBCards}
cards={cards}
setCards={setCards}
comparisonCards={comparisonCards}
setComparisonCards={setComparisonCards}
/>
</div>
<div className="row .container">
<div className="col-3 .container" id="preview-container">
<ImagePreviewer previewCard={previewCard} cards={cards} />
</div>
<div className="col-6 .container" id="tableContainer">
<DBContainer
user={user}
cards={cards}
setCards={setCards}
userDBCards={userDBCards}
setUserDBCards={setUserDBCards}
setComparisonCards={setComparisonCards}
/>
<Table
setComparisonCards={setComparisonCards}
setPreviewCard={setPreviewCard}
cards={cards}
setCards={setCards} />
</div>
</div>
<Footer />
</div>
);
}
export default App;
下面我有我的 AppContext 組件的代碼，它包含我的所有背景關系。
import { createContext, useState } from "react";
export const CardsContext = createContext();
export const BackgroundContext = createContext();
const AppContextProvider = ({children}) => {
const [cardInput, setCardInput] = useState([]);
const [cards, setCards] = useState([]);
const [previewCard, setPreviewCard] = useState([]);
const [comparisonCards, setComparisonCards] = useState([]);
const [userDBCards, setUserDBCards] = useState([]);
const [background, setBackground] = useState([]);
return(
<CardsContext.Provider value={{
cards: [cards, setCards],
cardInput: [cardInput, setCardInput],
previewCard: [previewCard, setPreviewCard],
comparisonCards: [comparisonCards, setComparisonCards],
userDBCards: [userDBCards, setUserDBCards]
}}>
<BackgroundContext.Provider value={[background, setBackground]}>
{children}
</BackgroundContext.Provider>
</CardsContext.Provider>
)
}
export default AppContextProvider
這在我的索引中包含了我所有的路線：
ReactDOM.render(
<BrowserRouter>
<Auth0ProviderWithRedirectCallback
domain={process.env.REACT_APP_DOMAIN}
clientId={process.env.REACT_APP_CLIENT_ID}
redirectUri={window.location.origin}
>
<AppContextProvider>
<Routes>
<Route path="/" element={<ProtectedRoute component={App}/>} />
<Route path="/profile/:id" element={<ProtectedRoute component={ProfilePage}/>} />
<Route path='/auth' element={<Auth />} />
{/* The below route should fire for upload list, rendering a page of thier cards. */}
<Route path='/profile/:id/:list' element={<ListPage />} />
</Routes>
</AppContextProvider>
</Auth0ProviderWithRedirectCallback>
</BrowserRouter>,
document.getElementById('root')
);
uj5u.com熱心網友回復：
你應該context[cards]像這樣用引號括起來context["cards"]。現在應用程式嘗試獲取其值cards尚未定義的背景關系。
另一個也一樣context[...]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/521746.html