快速發送數據到React組件

Question

我正在嘗試找到一種解決方案，以通過express route頁面中的渲染頁面將數據發送到React組件。 基本上，我有一個<a />標記，在該標記上附加了一個包含參數的超鏈接，這些參數將被發送到express應用程序。 基於這些參數，我想查詢數據庫，並將此數據與render頁面一起發送，以嘗試實現頁面的動態行為。 我的<a/>標簽包含在另一頁上，其格式如下：

<a href={"/view-ticket/" + data.id}>

其中data.id是我的數據庫中某個項目的id （例如2）

這是我的express路線：

router.get('/view-ticket/:id', (request, response) => {
    database.query('SELECT * FROM tickets WHERE id = ?', request.params.id, (error, result, fields) => {
        if(error){
            console.log('Error: ' + error.code);
        }
        console.log(result[0]);
        response.render(path.resolve(__dirname, 'views', 'ticket.pug'));
        // send data from database with the render page
        // response.send() send a JSON that is displayed on the page
    })

});

這是我的React組件：

import React from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';

class ViewTicket extends React.Component{
    constructor(props){
        super(props);
        // catch the response somehow via axios, if possible
    }

    render(){
        return (
            <div class="view-ticket col"></div>
        );
    }
}

ReactDom.render(<ViewTicket/>, document.getElementById('ticket'));

export default ViewTicket;

是否可以使用基本的GET ， POST方法，還是我需要做一些更激烈的事情，例如使用cookies ？

Answer 1

REST與前端之間進行交互的最簡單模型之一是REST請求/響應。 您在那里有axios，可以向特定端點發出請求：/ view-ticket /：id，然后在axios回調中，您可以訪問將包含返回數據的響應對象。 您最有可能使用GET，將數據應用於您的react組件狀態，並在要更改時使用響應數據調用setState。 這將導致頁面重新呈現。

Answer 2

從React的角度來看，您應該首先設置一個狀態，該狀態將保存來自后端的數據。 然后，您可以在組件加載時使用axios在React生命周期事件中獲取數據。 成功http調用后，您將組件的狀態設置為從后端接收的數據。 這將自動導致組件重新渲染自己。 在render方法中，您將檢查您的狀態是否持有故障單的數據，然后才可以渲染您的組件。

重要說明：如果您的響應包含的對象不是數組，並且在render方法中您可以顯示票證的屬性，則此方法有效。

如果您有多個票證，則將ViewTickets用作根組件，該組件將呈現每個票證以及指向票證詳細信息的鏈接。

import React from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import { ViewTicket } from '<path_to_file>';

class ViewTickets extends React.Component{
    constructor(props){
        super(props);
        this.state = { tickets : null };
    }
    componenentWillMount() {
       axios.get(<your_url_that_gets_all_tickets>).then(response => this.setState({tickets : response}));
    }
    render(){
        const { tickets } = this.state;
        return (
            {!!tickets &&
               tickets.map(ticket => (<ViewTicket id={ticket.id} url={ ticket.url } />))
            }
        );
    }
}

ReactDom.render(<ViewTickets/>, document.getElementById('ticket'));

export default ViewTickets;

// View ticket component

export const ViewTicket = (props) => (<div class="view-ticket col"><a href={this.props.url}>Link</a></div>);