如何使用ReactJS在列表上显示Select查询的结果？

Question

我是ReactJS的新开发人员，我在前端使用ReactJS 、后端使用NodeJS以及关于数据库的MySQL开发一个表。

\n

我希望当我单击操作列上的查看按钮时，它将被重定向到另一个页面，该页面显示包含选择查询结果的列表，如下所示：

\n

\n

ViewClient.js：

\n

class ViewClient extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            clients: [],\n            Code :1111\n        };\n        this.toggle = this.toggle.bind(this);\n        this.state = {\n            activeTab: \'1\',\n        };\n    }\n\n    toggle(tab) {\n        if (this.state.activeTab !== tab) {\n            this.setState({\n                activeTab: tab,\n            });\n        }\n    }\n    componentDidMount(Code) {\n        \n        axios({\n                method: "get",\n                url: "/app/viewclient/"+Code  ,\n                withCredentials: true,\n                headers: {\n                    "Access-Control-Allow-Origin": "*",\n                    "Content-Type": "application/json",\n                    Accept: "application/json"\n                }\n            })\n            .then(response => {\n                if (response && response.data) {\n                    this.setState({ clients: response.data });\n                }\n            })\n            .catch(error => console.log(error));\n    }\n\n    render() {\n        let { clients } = this.state;\n       // let { clients } = this.state;\n        return (\n            <div className="animated fadeIn">\n        <Row>\n         \n           <Col xs="12" md="6" className="mb-4">\n            <Nav tabs>\n              <NavItem>\n                <NavLink\n                  className={classnames({ active: this.state.activeTab === \'1\' })}\n                  onClick={() => { this.toggle(\'1\'); }}\n                >\n                  <i className="fa fa-info"></i> <span className={this.state.activeTab === \'1\' ? \'\' : \'d-none\'}> D\xc3\xa9tails</span>\n                </NavLink>\n              </NavItem>\n              <NavItem>\n                <NavLink\n                  className={classnames({ active: this.state.activeTab === \'2\' })}\n                  onClick={() => { this.toggle(\'2\'); }}\n                >\n                  <i className="fa fa-credit-card"></i> <span\n                  className={this.state.activeTab === \'2\' ? \'\' : \'d-none\'}> Factures</span>\n                </NavLink>\n              </NavItem>\n              <NavItem>\n                <NavLink\n                  className={classnames({ active: this.state.activeTab === \'3\' })}\n                  onClick={() => { this.toggle(\'3\'); }}\n                >\n                  <i className="fa fa-truck"></i> <span className={this.state.activeTab === \'3\' ? \'\' : \'d-none\'}> Bons de livraison</span>\n                </NavLink>\n              </NavItem>\n            </Nav>\n            <TabContent activeTab={this.state.activeTab} style={{ height:"420px"}}>\n              <TabPane tabId="1">\n               <ul>\n               {\n                       clients &&  clients.map(client => (\n                            <li key={client.Code}>\n                         <h1> Code client :    {client.Code} </h1>\n                             {client.Prenom}\n                              {client.Nom}\n                              {client.FAX}\n                             {client.Telephone}\n                               {client.Email}\n                                {client.Adresse1}\n                                 {client.Adresse2}\n               </li>\n               ))}\n               </ul>\n              </TabPane>\n              <TabPane tabId="2">\n                \n              </TabPane>\n              <TabPane tabId="3">\n              \n              </TabPane>\n            </TabContent>\n          </Col>\n          \n        </Row>\n      </div>\n        );\n    }\n}\n\nexport default ViewClient;\n

\n

ListClient.js

\n

class ListeClients extends Component {\n\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      clients: []\n    };\n    this.handleView = this.handleView.bind(this);\n    this.handleEdit = this.handleEdit.bind(this);\n  }\n\n  componentDidMount() {\n    axios({\n        method: "get",\n        url: "/app/listeclients/",\n        withCredentials: true,\n        headers: {\n          "Access-Control-Allow-Origin": "*",\n          "Content-Type": "application/json",\n          Accept: "application/json"\n        }\n      })\n      .then(response => {\n        if (response && response.data) {\n          this.setState({ clients: response.data });\n        }\n      })\n      .catch(error => console.log(error));\n  }\n\n/*handleViewB(Code) {\n   this.props.history.push(\'/clients/viewclient/\');\n}*/\nhandleView( evt) {\n    try {\n      console.log("Voir client")\n      this.props.history.push(\'/clients/viewclient/\');\n      // Do something that could throw\n    }\n    catch (error) {\n      this.setState({ error });\n    }\n  }\n  handleEdit(event) {\n    try {\n    console.log("Modifier client")\n    this.props.history.push(\'/clients/editclient/\');\n    // Do something that could throw\n     } catch (error) {\n       this.setState({ error });\n     }\n  }\n  // event.preventDefault;\n\n\n\n\n\n  render() {\n    let { clients } = this.state;\n     let Code = this.state;\n    var btn = {\n      backgroundColor: \'Transparent\',\n      backgroundRepeat: \'no-repeat\',\n      border: \'none\',\n      cursor: \'pointer\',\n      overflow: \'hidden\',\n      outline: \'none\'\n    }\n    var center = {\n      textAlign: "center"\n    }\n    return (\n      <div className="animated fadeIn">\n       \n          \n            <Card style={{ height:"420px"}}>\n              <CardHeader>\n                <h4>\n                  <strong>\n                    <i className="fa fa-align-justify" /> Tous les clients\n                  </strong>\n                </h4>\n              </CardHeader>\n              <CardBody>\n              \n                    <Table  bordered responsive size="sm" style={center}>\n                      <thead >\n                        <tr>\n                          <th ><strong>Code</strong></th>\n                          <th>Prenom</th>\n                          <th>Nom</th>\n                          <th>Email</th>\n                          <th>Telephone</th>\n                          <th>Action</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        {\n                          clients.map(client => (\n                            <tr key={client.Code}>\n                              <td>{client.Code} </td>\n                              <td>{client.Prenom}</td>\n                              <td>{client.Nom}</td>\n                              <td>{client.Email}</td>\n                              <td>{client.Telephone}</td>\n                              <td>\n                                <button style={btn}   onClick={this.handleView} type="button"><i class="fa fa-eye"></i></button>\n                                <button style={btn} onClick={this.handleEdit} type="button"><i class="fa fa-edit"></i></button>\n                                <button style={btn}><i class="fa fa-trash-o"></i></button>\n                              </td>\n                            </tr>\n                          ))}\n                      </tbody>\n                    </Table>\n              \n              </CardBody>\n            </Card>\n         \n        \n         \n      </div>\n    );\n  }\n}\n\nexport default ListeClients;\n

\n

我的 router.js ：

\n

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

\n

我的 server.js ：

\n

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

\n

当我运行后端时，它与Postman配合良好，但是当我使用ReactJS运行它时，它会将我重定向到http://localhost:3000/app/viewclient/但没有显示任何内容并且路由器的控制台console.log(req.params)返回{ Code: \'undefined\' }

\n

请问如何解决？

\n

Answer 1

默认情况下，React 应用程序会尝试连接到 port 上的 url 3000。因此，您要么需要向 axios 提供服务器运行时的完整 url 和端口号（您在 Postman 上尝试过的 url），要么修改 的属性scripts以package.json包含服务器端口号。

另外，ViewClient.js 中实现 componentDidMount 的方式不正确。在 中componentDidMount(Code)，Code将是未定义的。如果 的值Code是常量，您可以使用状态访问 componentDidMount 中的值。因此将其更改为以下内容：

 componentDidMount() {

    axios({
            method: "get",
            url: "/app/viewclient/"+this.state.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));
}