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

Posted 2023-02-27

【中文标题】在新页面中访问对象属性和显示组件

【英文标题】：Access object attributes and display component in a new page

【发布时间】：2020-07-16 13:14:09

【问题描述】：

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

【问题讨论】：

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

【参考方案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

请接受作为答案。

【讨论】：

我刚刚更新它忘记保存我的工作：codesandbox.io/s/bitcoin-example-06f7b

添加后，我的组件仍然没有打开新页面，它在同一页面中显示信息。这可能是什么原因？

你不需要我完全删除它的开关，它仍然有效。如果您使用多个使用相同参数的路径，该开关将起作用。您可以从以前的链接查看更新。

我试过了，但问题仍然存在。我为此做了一个小测试代码。请检查：codesandbox.io/s/affectionate-engelbart-u98bu 在此，当我单击 Entry.js 上的数据时，它是在同一页面上显示信息，而不是在新页面中打开。这可能是什么原因？

您拼写完全错误更改： 到：