Блог

Главная - Вопросы по программированию - Отображение данных API на других страницах реакции

Отображение данных API на других страницах реакции

#javascript #reactjs #api #react-router-dom

Вопрос:

В настоящее время я тренируюсь по реагированию, и у меня возникла проблема. Как вы можете видеть на скриншоте, я хотел бы нажать на название продукта, чтобы перенаправить его на страницу описания этого продукта. Я использовал react-router-dom для иллюзии нескольких страниц в приложении, но, похоже, я не могу отобразить данные API на другой странице. Я хотел бы иметь возможность нажать на название продукта, чтобы получить доступ к деталям этого продукта.

Вы найдете мой код ниже

Заранее большое вам спасибо за ваши объяснения

Изображение проекта

 import React, { Component } from 'react';
import './css/App.css';
import './css/Products.css'
import Navigation from './Components/Navigation';
import Products from './Components/Products';
import {BrowserRouter as Router, Route, Switch,} from 'react-router-dom';
import ProductsDetails from './Components/ProductsDetails';


export default class App extends Component {
  render() {
    return (
      <div className="App"> 
      <Router>
        <Navigation />
        <Switch>
          <Route path="/" exact component={Products} />
          <Route path="/products-details/:id" component={ProductsDetails} />
        </Switch>
      </Router>
      </div>
    )
  }
} 
 import React, { Component } from 'react';
import '../css/Products.css';
import axios from 'axios';
import '../Components/ProductsDetails'

export default class Products extends Component {
    state = {
        productsData: []
      }
      componentDidMount = () => {
        axios.get('https://fakestoreapi.com/products?limit=7')
        .then(res => {
          console.log(res.data)
          this.setState ({
            productsData: res.data
          })
        })
      }
    render() {
        const listsProducts = this.state.productsData.map(listProduct => {
            return <tbody className="products__body">
                    <tr>
                        <td>{listProduct.title}</td>
                        <td>{listProduct.category}</td>
                        <td>{listProduct.price}</td>
                        <td>{Math.round((listProduct.price   listProduct.price * 0.2)*100) /100}</td>
                    </tr> 
              </tbody>
          })
        return (
            <main className="products">
                <h1 className="products__title">Products management</h1>
                <table cellSpacing="0">
                <thead className="products__head">
                    <tr>
                    <th className="table--title">Product name</th>
                    <th className="table--title">Category</th>
                    <th className="table--title">Price</th>
                    <th className="table--title">Price (including VAT)</th>
                    </tr>
                </thead>
                  {listsProducts}
                </table>
            </main>
        )
    }
}

Ответ №1:

вам необходимо импортировать Link из react-router-dom файла in products:

 import {Link} from 'react-router-dom'

и замените эти строки:

 const listsProducts = this.state.productsData.map(listProduct => {
        return <tbody className="products__body">
                <tr>
                    <td><Link to={"/products-details/" listProduct.id}>{listProduct.title}</Link></td>
                    <td>{listProduct.category}</td>
                    <td>{listProduct.price}</td>
                    <td>{Math.round((listProduct.price   listProduct.price * 0.2)*100) /100}</td>
                </tr> 
          </tbody>
      })

Комментарии:

1. Большое вам спасибо, это работает! А затем, чтобы отобразить данные, я должен получить данные на странице «Сведения о продуктах», и это будет работать для всех ссылок, или мне нужно создать новую страницу для каждого продукта?

2. создайте одну страницу «Сведения о продуктах». вы можете получить id информацию из пути, написав const id = props.match.params.id в заголовке компонента productsDetails

Метки: