在新页面中访问对象属性和显示组件

Question

我想使用 Entry_test.js 中的 ID 访问信息并通过另一个组件 DisplayEntry.js 显示它。我已经从 Entry_test.js 中获取了 ID 并将 DisplayEntry.js 与它链接，但是当我尝试访问 DisplayEntry.js 中正在显示的对象的 {crypto.name} 属性时，它没有显示任何内容。而且点击链接时我也无法打开新页面。这是我的代码：

App.js-

import React  from 'react';
import "bootstrap/dist/css/bootstrap.min.css";

//import Exchange from './components/Exchange';
//import Entry from './components/Entry';
import DisplayEntry from './components/DisplayEntry';
import Entry_test from './components/Entry_test';
import NavBar from './components/NavBar';
import {Route} from 'react-router-dom';

function App(){
  return(

    <div>
       <NavBar/>

       <Route path="/entry" excat component={Entry_test}/>
       {/* <Route excat path="/exchange" component={Exchange}/> */}
       <Route path="/entry/:id" component={DisplayEntry}/>

      </div>

  )
}

export default App;

Entry_test.js-

import React,  {useState,useEffect} from 'react'
import {Link} from 'react-router-dom'
import {Table} from 'reactstrap'
import {Form,Button} from 'react-bootstrap'
// import style from './style.css'
// import Loading from './loading.gif';
import "bootstrap/dist/css/bootstrap.min.css";


const CoinGecko = require('coingecko-api');
const CoinGeckoClient = new CoinGecko();

function Display(){

    useEffect(()=>{
        fetchItems();
    },[]);

    const[cryptos,setCryptos]=useState([]);

    const fetchItems=async()=>{
           const info = await CoinGeckoClient.coins.all();
            console.log(info.data);
            setCryptos(info.data)


    }

    const cryptoJsx=cryptos.map(crypto=>(
        <tr key={crypto.id}>
                <td className="point">
                <img src={crypto.image.thumb}  alt="symbol"/>
                <Link  to={`/entry/${crypto.id}`}>{crypto.id}</Link></td>
                <td className="point">{crypto.symbol}</td>
                <td className="point">{crypto.name}</td>
                <td className="point">{crypto.market_data.current_price.usd}</td>
                <td className="point">{crypto.market_data.total_volume.usd}</td>                   

        </tr>
    ));

    return(
        <div>                    
                <h2 className="text-capitalize text-center my=5">Cryptocurrencies </h2>
                <div className="float-right p-2">
                <Form inline>
                <input type="text" placeholder="Search" className="mr-sm-2" 
                onChange={(event)=>this.search(event.target.value)}/>
                <Button >Search</Button>
                </Form>
                </div>
                <Table striped bordered hover>
                        <thead>
                            <tr className="text-center">
                            <th>Id</th>
                            <th>Symbol</th>
                            <th>Name</th>
                            <th>Current Price</th>
                            <th>Total Volume</th>
                            </tr>
                        </thead>
                        <tbody>
                            {cryptoJsx} 
                        </tbody>
                </Table>

            </div>
    );

}
export default Display

DisplayEntry.js-

import React,  {useState,useEffect} from 'react'
import "bootstrap/dist/css/bootstrap.min.css";

// const CoinGecko = require('coingecko-api');
// const CoinGeckoClient = new CoinGecko();

function Display_info({match}){

    useEffect(()=>{
      fetchItemDis();
      console.log(match); 

    },[]);

    const[crypto , setCrypto]=useState({});

    const fetchItemDis= async() =>{
      let fetchDatadis= await fetch
      (`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${match.params.id}&order=market_cap_desc&per_page=100&page=1&sparkline=false`);

      const data_dis=await fetchDatadis.json();
    //  const data_dis= await CoinGeckoClient.coins.fetchMarketChart(`${match.params.id}`);
      setCrypto(data_dis);
      console.log(data_dis)
    };       

    return(
      <div>
        {crypto.name}
      </div>

    );

}
export default Display_info

Answer 1

您只需要在此处进行一些小改动：

import DisplayInfo from "./components/DisplayEntry";
import Display from "./components/Entry_test";
import NavBar from "./components/NavBar";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { render } from "react-dom";

export default function App(props) {

  return (
    <Router>
        {/* <NavBar /> */}
        <Route exact path="/" component={Display} />
        {/* <Route excat path="/exchange" component={Exchange}/> */}
        <Switch>
        <Route path="/entry/:id" component={DisplayInfo} />
        </Switch>
    </Router>
  );

您可以将初始路径改回“/enter”。 您需要将 BrowserRouter 导入为 Router，并将子组件设置为 Router。 同时为不同的路径“/entry/:id”导入 Switch，它将传递 id 参数以匹配 DisplayInfo 中的属性。

在您的 DisplayInfo 中查看您收到的对象数组的值，第一个数组为 0，因此：

const [crypto, setCrypto] = useState(null);

return(
      <div>
        {crypto === null ? "loading..." : crypto[0].name}
      </div>

    );

这将显示名称。

这是一个例子https://codesandbox.io/s/fragrant-wave-06f7b

请接受作为答案。