React Recoil useRecoilValue返回一个空原子

如何解决React Recoil useRecoilValue返回一个空原子

我在从全局原子获取价值方面遇到问题。我有index.js route.js，然后在组件中有一个主页和一个拼贴页面。主页是狗名的列表以及每个狗的图像。用户将选择一条狗，然后将原子设置为此值。所有这些在首页中都可以正常运行。但是，当我从拼贴页面上的原子上调用getRecoilValue时，该调用会不断返回一个空原子。

Atoms / Selector存储和导出到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();

routes.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

Home.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,useRecoilValue } from "recoil";
import { activeDogAtom } from "./atoms";


const DOGS = [
  "Martha","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","three"];
const onyxImages = ["one","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;

atoms.js

import { atom } from "recoil";



export const activeDogAtom = atom({
  key: "activeDog",default: "",});

export const activelogoAtom = atom({
  key: "activelogo",default: '',});

解决方法

尝试更改Collage.js中的这部分代码

const adog = useRecoilValue(activeDogAtom);
var dog = "";
if(adog === ''){

对此：

const adog = useRecoilValue(activeDogAtom);
var dog = adog;
if(adog === ''){

,

此问题的答案是用链接组件替换href。

  <a href="/collages">
        {" "}
        <span className="dog">{activeDog}</span>{" "}
      </a>

收件人：

    <Link to={'/collages' }><span className="dog">{activeDog}</span></Link>{" "}