Доступ к атрибутам объекта и отображение компонента на новой странице - PullRequest
Новая
       38

Доступ к атрибутам объекта и отображение компонента на новой странице

1 голос
/ 04 апреля 2020

Я хочу получить доступ к информации, используя идентификатор в Entry_test. js и отобразить ее через другой компонент, который является DisplayEntry. js. Я получил идентификатор из Entry_test. js и связал DisplayEntry. js с ним, но когда я пытаюсь получить доступ к атрибуту отображаемого объекта, который является {crypto.name} в DisplayEntry. js, он ничего не отображает. А также я не могу открыть новую страницу при нажатии на ссылку. Вот мой код:

Приложение. 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

1 Ответ

0 голосов
/ 04 апреля 2020

Вам просто нужно внести некоторые незначительные изменения здесь: 

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. Также импортируйте Switch для различных путей "/ entry /: id", который будет передавать параметр 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

Пожалуйста, примите в качестве ответа.

...