Question

我是新开发人员 ReactJS ，我使用前端的 ReactJS ，后端的 NodeJS 和 MySQL 开发了一个表关于数据库的strong>。

我想要在单击“操作”列上的查看按钮时将其重定向到另一个页面，该页面显示一个包含Select查询结果的列表，如下所示：

ViewCLient.js：

class ViewClient extends Component {
    constructor(props) {
        super(props);
        this.state = {
            clients: [],
            Code :1111
        };
        this.toggle = this.toggle.bind(this);
        this.state = {
            activeTab: '1',
        };
    }

    toggle(tab) {
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab,
            });
        }
    }
    componentDidMount(Code) {

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

ListClient.js

class ListeClients extends Component {


  constructor(props) {
    super(props);
    this.state = {
      clients: []
    };
    this.handleView = this.handleView.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
  }

  componentDidMount() {
    axios({
        method: "get",
        url: "/app/listeclients/",
        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));
  }

/*handleViewB(Code) {
   this.props.history.push('/clients/viewclient/');
}*/
handleView( evt) {
    try {
      console.log("Voir client")
      this.props.history.push('/clients/viewclient/');
      // Do something that could throw
    }
    catch (error) {
      this.setState({ error });
    }
  }
  handleEdit(event) {
    try {
    console.log("Modifier client")
    this.props.history.push('/clients/editclient/');
    // Do something that could throw
     } catch (error) {
       this.setState({ error });
     }
  }
  // event.preventDefault;





  render() {
    let { clients } = this.state;
     let Code = this.state;
    var btn = {
      backgroundColor: 'Transparent',
      backgroundRepeat: 'no-repeat',
      border: 'none',
      cursor: 'pointer',
      overflow: 'hidden',
      outline: 'none'
    }
    var center = {
      textAlign: "center"
    }
    return (
      <div className="animated fadeIn">


            <Card style={{ height:"420px"}}>
              <CardHeader>
                <h4>
                  <strong>
                    <i className="fa fa-align-justify" /> Tous les clients
                  </strong>
                </h4>
              </CardHeader>
              <CardBody>

                    <Table  bordered responsive size="sm" style={center}>
                      <thead >
                        <tr>
                          <th ><strong>Code</strong></th>
                          <th>Prenom</th>
                          <th>Nom</th>
                          <th>Email</th>
                          <th>Telephone</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        {
                          clients.map(client => (
                            <tr key={client.Code}>
                              <td>{client.Code} </td>
                              <td>{client.Prenom}</td>
                              <td>{client.Nom}</td>
                              <td>{client.Email}</td>
                              <td>{client.Telephone}</td>
                              <td>
                                <button style={btn}   onClick={this.handleView} type="button"><i class="fa fa-eye"></i></button>
                                <button style={btn} onClick={this.handleEdit} type="button"><i class="fa fa-edit"></i></button>
                                <button style={btn}><i class="fa fa-trash-o"></i></button>
                              </td>
                            </tr>
                          ))}
                      </tbody>
                    </Table>

              </CardBody>
            </Card>



      </div>
    );
  }
}

export default ListeClients;

我的router.js：

exports.viewclient = function(req, res) {
  var Code = req.query.Code;
    console.log(req.params);

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

}

我的server.js：

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

当我运行后端时，它可以与 Postman 一起很好地工作，但是当我使用 ReactJS 运行时，它会将我重定向到http://localhost:3000/app/viewclient/，但是什么都没有显示并且路由器console.log(req.params)的控制台返回{ Code: 'undefined' }

请问如何解决？

Answer 1

默认情况下，react应用会尝试连接到端口3000上的URL。因此，您要么需要提供带有运行服务器的端口号的完整URL（您在Postman上尝试过的URL）到axios，要么修改scripts的{{1}}属性以包括服务器端口号。

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

Code

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

1 个答案: