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请求/响应。您有axios可以向特定端点发出请求：/ view-ticket /：id然后在axios回调中您可以访问将返回数据的响应对象。您最有可能使用GET，将数据应用于您的反应组件状态，并在您想要更改时使用响应数据更新数据时调用setState。这将导致页面重新渲染。

Answer 2

从React的角度来看，您应首先设置一个状态来保存来自后端的数据。然后，您可以在加载组件时使用axios在React生命周期事件中获取数据。成功进行http调用后，您将设置组件状态为从后端接收的数据。这将自动导致组件重新渲染自己。在渲染方法中，您将检查您的状态是否包含故障单的数据，然后它才会呈现您的组件。

重要提示：如果您的回复包含的对象不是数组，则此选项有效，而在渲染方法中，您可以显示故障单的特性。

如果您有多张故障单，那么请创建一个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>);

Express将数据发送到React组件

2 个答案: