javascript - 无法使用 MySQL 和 ReactJS 显示行

Question

我是ReactJS新开发者，我开发了一个表，前端使用ReactJS，后端使用NodeJS，数据库使用MySQL。我想通过列表中的代码(主键)选择请求来获取数据。

正如您在上面看到的，我希望当我单击 View 按钮时，它将引导我到列表页面，在该页面中检索该行。

我的 View 客户端:

class ViewClient extends Component {

    constructor(props) {
        super(props);


        this.state = {
            clients: []
        };

        this.toggle = this.toggle.bind(this);
        this.state = {
            activeTab: '1',
        };
    }

    toggle(tab) {
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab,
            });
        }
    }
    componentDidMount() {
        var Code = this.props.Code;
        axios({
                method: "get",
                url: "/app/viewclient/?Code="+Code+",
                withCredentials: true,
                headers: {
                    "Access-Control-Allow-Origin": "*",
                    "Content-Type": "application/json",
                    Accept: "application/json"
                }
            })
            .then(response => {
                if (response && response.data) {
                    this.setState({ clients: response.data });
                }
            })
            .catch(error => console.log(error));
    }


    render() {
        let { clients } = this.state;
        return (
            <div className="animated fadeIn">
        <Row>
         
           <Col xs="12" md="6" className="mb-4">
            <Nav tabs>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '1' })}
                  onClick={() => { this.toggle('1'); }}
                >
                  <i className="fa fa-info"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Détails</span>
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '2' })}
                  onClick={() => { this.toggle('2'); }}
                >
                  <i className="fa fa-credit-card"></i> <span
                  className={this.state.activeTab === '2' ? '' : 'd-none'}> Factures</span>
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '3' })}
                  onClick={() => { this.toggle('3'); }}
                >
                  <i className="fa fa-truck"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Bons de livraison</span>
                </NavLink>
              </NavItem>
            </Nav>
            <TabContent activeTab={this.state.activeTab} style={{ height:"420px"}}>
              <TabPane tabId="1">
               <ul>
               {
                       clients &&  clients.map(client => (
                            <li key={client.Code}>
                         <h1> Code client :    {client.Code} </h1>
                             {client.Prenom}
                              {client.Nom}
                              {client.FAX}
                             {client.Telephone}
                               {client.Email}
                                {client.Adresse1}
                                 {client.Adresse2}
               </li>
               ))}
               </ul>
              </TabPane>
              <TabPane tabId="2">
                
              </TabPane>
              <TabPane tabId="3">
              
              </TabPane>
            </TabContent>
          </Col>
          
        </Row>
      </div>
        );
    }
}

export default ViewClient;

我的路由器是:

    exports.viewclient = function(req, res) {
        var Code = req.params.Code;
console.log(Code);
        connection.query("SELECT Code, Prenom, Nom, FAX, Telephone, Email, Adresse1, Adresse2  FROM clients WHERE Code =?',[Code],  function(error, results, fields) {
            if (error) throw error;
            res.send(JSON.stringify(results));
    console.log(results);
        });
    
    }

我的服务器是:

router.get('/viewclient/:Code?', clients.viewclient);

当我运行它时，我进入控制台后端[]，而在我的前端，没有显示任何内容，因为未检索到该行。 请问如何解决这个问题？

Answer 1

错误是，Get 方法不包含主体参数。主体参数仅在 POST 请求中可用。请尝试使用查询参数，因为您将代码作为 ?Code= 发送。

在后端，使用req.query.Code获取代码，而不是使用req.body.Code