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

我想使用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;

从“React”导入React；
导入“bootstrap/dist/css/bootstrap.min.css”；
//从“./components/Exchange”导入Exchange；
//从“./组件/条目”导入条目；
从“./components/DisplayEntry”导入DisplayEntry；
从“./components/Entry_test”导入条目_测试；
从“./components/NavBar”导入NavBar；
从'react router dom'导入{Route}；
函数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

import React，{useState，useffect}来自“React”
从“react router dom”导入{Link}
从“reactstrap”导入{Table}
从“react bootstrap”导入{Form，Button}
//从“./style.css”导入样式
//从“/Loading.gif”导入加载；
导入“bootstrap/dist/css/bootstrap.min.css”；
const coincecko=require（'coincecko-api'）；
const CoinGeckoClient=新CoinGecko（）；
函数显示（）{
useffect（（）=>{
fetchItems（）；
},[]);
const[cryptos，setCryptos]=useState（[]）；
const fetchItems=async（）=>{
const info=wait CoinGeckoClient.coins.all（）；
控制台日志（信息数据）；
setCryptos（信息数据）
}
const cryptoJsx=cryptos.map（crypto=>(
{crypto.id}
{加密符号}
{crypto.name}
{加密。市场数据。当前价格。美元}
{加密。市场数据。总交易量。美元}
));
返回(
加密货币
this.search（event.target.value）}/>
搜寻
身份证件
象征
名称
现行价格
总体积
{cryptoJsx}
);
}
导出默认显示

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

import React，{useState，useffect}来自“React”
导入“bootstrap/dist/css/bootstrap.min.css”；
//const coincecko=require（'coincecko-api'）；
//const CoinGeckoClient=新CoinGecko（）；
函数显示信息（{match}）{
useffect（（）=>{
fetchItemDis（）；
控制台日志（匹配）；
},[]);
const[crypto，setCrypto]=useState（{}）；
const fetchItemDis=async（）=>{
让fetchDatadis=等待获取
(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${match.params.id}&order=market\u cap\u desc&per\u page=100&page=1&sparkline=false`）；
const data_dis=wait fetchDatadis.json（）；
//const data_dis=wait CoinGeckoClient.coins.fetchMarketChart（`${match.params.id}`）；
setCrypto（数据加密）；
控制台日志（数据显示）
};       
返回(
{crypto.name}
);
}
导出默认显示信息

您只需在此处进行一些小的更改：

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>
  );

从“/components/DisplayEntry”导入显示信息；
从“/components/Entry_test”导入显示；
从“/components/NavBar”导入导航栏；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“react dom”导入{render}；
导出默认功能应用程序（道具）{
返回(
{/*  */}
{/*  */}
);

您可以将初始路径更改回“/enter”。 您需要将BrowserRouter作为路由器导入，并将子组件设置为路由器。 还为不同路径“/entry/：id”导入开关，它将传递id参数以匹配DisplayInfo中的属性

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

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

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

    );

const[crypto，setCrypto]=useState（null）；
返回(
{crypto==null？“正在加载…”：crypto[0]。名称}
);

这将显示名称

这里有一个例子

---

请接受作为答案。

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

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>
  );

从“/components/DisplayEntry”导入显示信息；
从“/components/Entry_test”导入显示；
从“/components/NavBar”导入导航栏；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“react dom”导入{render}；
导出默认功能应用程序（道具）{
返回(
{/*  */}
{/*  */}
);

您可以将初始路径更改回“/enter”。 您需要将BrowserRouter作为路由器导入，并将子组件设置为路由器。 还为不同路径“/entry/：id”导入开关，它将传递id参数以匹配DisplayInfo中的属性

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

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

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

    );

const[crypto，setCrypto]=useState（null）；
返回(
{crypto==null？“正在加载…”：crypto[0]。名称}
);

这将显示名称

这里有一个例子

---

请接受作为答案。

请格式化代码。当代码使用不一致的格式时，它会变得很难阅读。您也不必手动执行，有很多工具可以帮助您。请格式化代码。当代码使用不一致的格式时，它会变得很难阅读。您不必手动执行