ReactJS，功能组件。所以我想根据点击 <Link> 来设置状态

Question

例如，我有一个菌株列表，每个菌株都位于从 react-router-dom 导入的组件中。我希望此链接将我带到 Route path='/strains/{strain}'。在这个页面上，我只想渲染被点击的菌株的名称，但是当点击一个链接时，所有菌株的名称都会被渲染。这是我显示所有路线的代码。

import React, {useEffect, useState} from 'react';
import { Route, Link } from 'react-router-dom';
import axios from 'axios';
import UserCreation from './components/UserCreation';
import Login from "./components/Login";
import StrainCard from './components/StrainCard';
import { Container } from "reactstrap";
import NavBarComponent from "./components/NavBarComponent";
import SavedStrain from './components/SavedStrain';
import Strain from './components/Strain';
import StrainDetails from './components/StrainDetails';

function App() {
  const [strains, setStrains] = useState([]);
  const [savedList, setSavedList] = useState([]);
  const [strain, setStrain] = useState([]);

  
  useEffect(() => {
    const getStrains = () => {
      axios
        .get('http://strainapi.evanbusse.com/CEIl7eN/strains/search/all')
        .then(response => {
          console.log(response);
          setStrains(response.data);
        })
        .catch(error => {
          console.error('Server Error', error.response);
        });
    }
    getStrains();
  }, []);


console.log(strains)

  useEffect(() => {
    setStrain(Object.keys(strains).slice(0, 20))
  }, [strains])

  console.log(strain)

  const addToSavedList = strain => {
    setSavedList([...savedList, strain]);
  };

  return (
    <Container className="App">
        <NavBarComponent />
      <Route exact path='/'>
        <Link to='/login'>Log in</Link>
      </Route>
        <Route exact path='/login'>
            <Login />
        </Route>
      <Route exact path='/signup'>
        <UserCreation />
      </Route>
      <Route exact path='/strains' render= { () => <StrainCard strains={strains} />} />
      <Route exact path='/strains/:strain' render = {(props) => <StrainDetails {...props} strains={strains} addToSavedList={addToSavedList} strain={strain} />} />
      <Route path='/savedstrains' render={() => <SavedStrain savedList={savedList} /> } />
    </Container>
  );
}

export default App;

这是我的代码，显示了菌株的链接是如何呈现的。

import React, {useState, useEffect} from 'react';
import {Link, Route} from 'react-router-dom';
import {Card} from 'reactstrap';
import {Button} from "react-bootstrap";
//import SavedStrain from "./SavedStrain";

const Strain = ({strain, strains, type}) => {
    const [filteredStrains, setFilteredStrains] = useState([]);
    
    let x = strains[`${strain}`];
    console.log(x)

    const filterStrains = () => {
        if(x.race === type) {
            setFilteredStrains(strain);
        }
    }

    

    console.log(filteredStrains)

    useEffect(() => {
        filterStrains(); 
    }, [type])

    return (
        <div className='filteredContainer'>
            <Card className='card'>
                <Link to={`/strains/${strain}`}>
                    <div className="strain-card">
                        <div className="strain">
                            {`${filteredStrains}`} 
                        </div>
                    </div>
                </Link> 
            </Card> 
        </div>    
    )
}

export default Strain;

最后，这是我的代码，我只想根据点击的菌株链接显示一个菌株，而不是所有菌株。

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {Card} from 'react-bootstrap';

const StrainDetails = () => {
    const [strains, setStrains] = useState([]);
    const [details, setDetails] = useState([]);
    //const [strain, setStrain] = useState([]);

        
    useEffect(() => {
        const getStrains = () => {
            axios
              .get('http://strainapi.evanbusse.com/CEIl7eN/strains/search/all')
              .then(response => {
                console.log(response);
                setStrains(response.data);
              })
              .catch(error => {
                console.error('Server Error', error.response);
              });
          }
          getStrains();
    }, []);

    console.log(Object.values(strains).slice(0, 20))

    useEffect(() => {
        setDetails(Object.values(strains).slice(0, 20));
    }, [strains])

    console.log(details);

    let strain = Object.keys(strains).slice(0, 20).map(y => {return y});
    let x = Object.keys(strains).slice(0,20);

    // const addToSavedList = strain => {
    //     setSavedList([...savedList, strain]);
    //     console.log(savedList);
    //   };
    
    // const saveStrain = () => {
    //     addToSavedList(strain);
    // }

    return (
            <div className='container'>
                <Card>
                    <div className="strain-card">
                        <div className='name'>
                            strain: {strain}
                        </div>
                        {/* <div className='id'>
                            ID: {x.id.toString()}
                        </div>
                        <div className='type'>
                            Type: {x.race.toString()}
                        </div>
                        <div className='flavors'>
                            Flavors: {x.flavors.toString()}
                        </div>
                        <div className='effects'>
                            Medical effects: {x.effects.medical.toString()} <br />
                            Positive effects: {x.effects.positive.toString()} <br />
                            Negative effects: {x.effects.negative.toString()} <br />
                        </div> */}
                        {/* <Button className='save' onClick={saveStrain}>Save</Button> */}
                    </div>
                </Card>
            </div>
        )
    }

    export default StrainDetails;

例如，我只想显示 Alien Bubba 菌株，而不是所有菌株。 （我点了链接外星人巴巴）

image of what happens when one link is clicked on

Answer 1

你想要的是，一种访问路由参数的方法（在你的情况下是应变），像这样在渲染回调中将路由器道具传递给你的组件

<Route exact path='/strains/:strain' render = {(props) => <Strain {...props} strains={strains} addToSavedList={addToSavedList} />} />

现在在您的 Strain 组件中，您可以像这样访问参数

const Strain = ({match}) => {
   console.log(match.params)
}