我在从全局原子中获取值时遇到问题。我有 index.js routes.js，然后在组件中我有一个主页和一个拼贴页面。主页是狗名列表和每个狗的图像。用户将选择一只狗，然后用这个值设置原子。这一切都在主页中正常工作。但是，当我从拼贴页面调用原子上的 getRecoilValue 时，调用会不断返回一个空原子。
原子/选择器在 atom.js 中存储和导出
反冲根在 index.js 中。就像我说的那样，Recoil 在主页上工作得很好。为什么它在拼贴页面上不起作用？
index.js
import React from "react";
import ReactDOM from "react-dom";
import { RecoilRoot } from "recoil";
import "./index.css";
import { BrowserRouter } from "react-router-dom";
import Routes from './routes';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render((
<React.StrictMode>
<RecoilRoot>
<BrowserRouter>
<Routes/>
</BrowserRouter>
</RecoilRoot>
</React.StrictMode>
), document.getElementById('root'));
registerServiceWorker();
路由.js
import React from 'react';
import { Route, Switch } from 'react-router-dom'
import Home from './components/Home';
import About from './components/about';
import Contact from './components/Contact';
import SMS from './components/SMS';
import Collages from './components/Collages';
const Routes = () => (
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/email" component={Contact}/>
<Route exact path="/text" component={SMS}/>
<Route exact path="/collages" component={Collages}/>
</Switch>
);
export default Routes
主页.js
import React from "react";
import { atom, useRecoilState, selector, useRecoilValue } from "recoil";
import Gracie from "../assets/gracie.png";
import Archie from "../assets/archie.png";
import Onyx from "../assets/onyx.png";
import Hulk from "../assets/hulk.png";
import Martha from "../assets/martha.png";
import Charlie from "../assets/charlie.png";
import BernieImg from "../assets/hulk.png";
import "./Home.css";
import ParticlesBg from "particles-bg";
import { Container } from "@material-ui/core";
import NavMenu from "./Menu";
import Collage from "./Collages";
import {activeDogAtom, activeLogoAtom } from "./atoms";
const DOGS = [
"Gracie",
"Archie",
"Onyx",
"Hulk",
"Martha",
"Charlie",
"Bernie",
];
const Home= () => {
const [activeDog, setActiveDog] = useRecoilState(activeDogAtom);
const [activeLogo, setActiveImage] = useRecoilState(activeLogoAtom);
const doggy = useRecoilValue(activeDogAtom);
if (doggy === '' ){
setActiveDog(DOGS[0]);
setActiveImage(Gracie)
};
const handleDogUpdate = (event) => {
const strDog = event.target.textContent;
setActiveDog(strDog);
switch (strDog) {
case "Bernie":
setActiveImage(BernieImg);
break;
case "Gracie":
setActiveImage(Gracie);
break;
case "Hulk":
setActiveImage(Hulk);
break;
case "Onyx":
setActiveImage(Onyx);
break;
case "Martha":
setActiveImage(Martha);
break;
case "Archie":
setActiveImage(Archie);
break;
case "Charlie":
setActiveImage(Charlie);
break;
default:
setActiveImage(Gracie);
}
};
return (
<>
<NavMenu />
<ParticlesBg type="circle" bg={true} />
<section>
<h1>Knight's Kennel </h1>
<img
className="logo"
src={activeLogo}
alt="doggy"
width="220"
height="250"
/>
</section>
<section>
{DOGS.map((dog) => (
<button
className={`btn ${dog === activeDog ? "selected" : ""}`}
onClick={handleDogUpdate}
key={dog}
>
{dog}
</button>
))}
</section>
<p>
Welcome! Please view images of{" "}
<a href="/collages">
{" "}
<span className="dog">{activeDog}</span>{" "}
</a>
</p>
<Container>
<h2>
Breeders of high quality AKC Miniature Schnauzers in Rhode Island
</h2>
</Container>
</>
);
}
export default Home;
Collage.js
mport * as React from "react";
import { render } from "react-dom";
import { Container } from "@material-ui/core";
import ParticlesBg from "particles-bg";
import "../utils/collagestyles.css";
import { ReactPhotoCollage } from "react-photo-collage";
import NavMenu from "./Menu";
import { atom, useRecoilState, selector, useRecoilValue } from "recoil";
import { activeDogAtom } from "./atoms";
const DOGS = [
"Martha",
"Archie",
"Onyx",
"Hulk",
"Charlie",
"Bernie",
"Gracie",
];
const archieImages = ["one", "two", "three"];
const marthaImages = [
{ src: "https://1966.imgix.net/Archie_Pedigree_Sire.jpg" },
{ src: "https://1966.imgix.net/archie-head.jpg" }, ];
const bernieImages = ["one", "two", "three"];
const onyxImages = ["one", "two", "three"];
const hulkImages = [{ src: "https://1966.imgix.net/DSC01848.jpg" }];
const gracieImages = [
{ src: "https://1966.imgix.net/DSC01838.jpg" },
{ src: "https://1966.imgix.net/DSC01796.jpg" },
{ src: "https://1966.imgix.net/Archie_Pedigree_Sire.jpg" },
];
var setting = {
width: "300px",
height: ["250px", "170px"],
layout: [1, 3],
photos: [],
showNumOfRemainingPhotos: true,
};
const Collages = () => {
const adog = useRecoilValue(activeDogAtom);
var dog = "";
if(adog === ''){
dog = DOGS[0];
setting.photos = marthaImages;
} else {
switch (dog) {
case DOGS[0]:
setting.photos = marthaImages;
break;
case DOGS[1]:
setting.photos = marthaImages;
break;
case DOGS[2]:
setting.photos = hulkImages;
break;
case DOGS[3]:
setting.photos = archieImages;
break;
case DOGS[4]:
setting.photos = onyxImages;
break;
case DOGS[5]:
setting.photos = gracieImages;
break;
};
};
return (
<>
<NavMenu />
<ParticlesBg type="circle" margin="20px" bg={true} />
<br></br>
<Container align="center">
<h1>Knight's Kennel</h1>
<h2> The value of dog is {dog} </h2>
<h2>
{" "}
Breeders of high quality AKC Miniature Schnauzers in Rhode Island
</h2>
<section>
<ReactPhotoCollage {...setting} />
</section>
</Container>
</>
);
};
export default Collages;
atom.js
import { atom } from "recoil";
export const activeDogAtom = atom({
key: "activeDog",
default: "",
});
export const activeLogoAtom = atom({
key: "activeLogo",
default: '',
});