Question

<块引用>

我是 react/react-router 的新手。

App.js 文件：

 import React , {useState , useEffect} from 'react'; 
 import './App.css'; 
 import {Route, Switch} from 'react-router-dom'; 
 import Header from './components/ui/Header'; 
 import axios from 'axios';
 import CharacterGrid from './components/characters/characterGrid';
 import Search from './components/ui/Search'; 
 import QuotesFetch from './Quotes/QuotesFetch'; 
 import Quotes from './Quotes/Quotes';


  return (

    <div className="container">
      <Header />
      <Switch>
      <Route path="/">
          <Search getQuery={(q) => setQuery(q)} />
          <CharacterGrid
            item={item}
            isLoading={isLoading}
          />
          
        </Route>
        <Route path="/characters">
          <Search getQuery={(q) => setQuery(q)} />
          <CharacterGrid
            item={item}
            isLoading={isLoading}
          />
        </Route>
          
        <Route path="/quotes">
        <Quotes />
        </Route>

          <Route path="/series">
            
          </Route>
        </Switch>
      
    </div>   ); }

export default App;

index.js 文件：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import {   BrowserRouter } from "react-router-dom";
    
    ReactDOM.render(   <BrowserRouter> 
        <App />   </BrowserRouter>      ,   document.getElementById('root') );

QoutesFetch.js 文件：

import React , { useState , useEffect} from 'react'; 
import Quotes from './Quotes'; 
import axios from 'axios'; 
import Spinner from '../img/spinner.gif';
    
    const QuotesFetch = (props) => {
        const [quote , setQuotes] = useState([]);
        const [isLoading , setIsLoading] = useState(true);
    
    
      useEffect(() => {
        const url =
          `https://www.breakingbadapi.com/api/quotes`;
    
        axios
          .get(url)
          .then((res) => {
            setQuotes(res.data);
            setIsLoading(false);
          })
          .catch((err) => console.log("QuotesList Error=>", err));   }, []);
        
        return isLoading ? (<img style={{width: '200px' , margin: 'auto' , display: 'block'}} src= {Spinner} />) : 
        (
        <section>
            {quote.map((quote) => (
            <Quotes key={quote.quote_id} quote={quote} />
          ))}
        </section>
        ) }
    
        export default QuotesFetch

Answer 1

我认为您不是在渲染组件 QuotesFetch，而是在 App.js 中渲染 Quotes。

因此报价呈现为空？

尝试更换

        var sql = `SELECT 
        COALESCE(commerce_order.total_price_usd, 0) AS 'Total price (USD)',
        commerce_order.country AS Country,
        commerce_order.customer_id AS 'Customer Id',
        COALESCE(commerce_order.ffm_status, "unfulfilled") AS 'Fulfillment status'
        FROM commerce_order
        WHERE merchant_id = ?`;
        var bind = [p.data.store_id]
        const fromIndex = sql.indexOf('FROM');

        if (p.data.hasOwnProperty('email')){
            sql += " AND commerce_order.customer_email REGEXP ? "
            bind.push(p.data.email);
        };

        if (p.data.hasOwnProperty('startDate')){
            sql += " AND DATE(commerce_order.processed_at) >= ? "
            bind.push(p.data.startDate);
        };

        if (p.data.hasOwnProperty('endDate')){
            sql += " AND DATE(commerce_order.processed_at) <= ? "
            bind.push(p.data.endDate);
        };

        if (p.data.hasOwnProperty('paymentStatus')){
            if (p.data.paymentStatus !== 'all'){
                sql += " AND commerce_order.financial_status = ? "
                bind.push(p.data.paymentStatus);
            };
        };

        if (p.data.hasOwnProperty('fulfillmentStatus')){
            if (p.data.fulfillmentStatus !== 'all'){
                if (p.data.fulfillmentStatus === 'fulfilled'){
                    sql += " AND commerce_order.ffm_status = ? ";
                    bind.push(p.data.fulfillmentStatus);
                } else if (p.data.fulfillmentStatus === 'unfulfilled'){
                    sql += " AND commerce_order.ffm_status IS NULL "
                };
            };
        };

        if (p.data.hasOwnProperty('order_number')){
            sql += " AND commerce_order.order_number = ? "
            bind.push(p.data.order_number);
        };

        sql += " ORDER BY commerce_order.processed_at "

与


      <Route path="/quotes">
        <Quotes />
      </Route>

[编辑]

您还应该将路由“/”移动到列表的末尾或添加“精确”属性，否则第一条路由会拦截所有流量：


      <Route path="/quotes">
        <QuotesFetch />
      </Route>

URL 更改但组件未呈现 - React Router

1 个答案: