javascript - 无法使用 MySQL 和 ReactJS 显示行
问题描述
我是新开发人员 ReactJS,我在前端使用 ReactJS、在后端使用 NodeJS 和关于数据库的 MySQL 开发了一个表。我想通过列表中的代码(主键)选择请求获取数据。
正如您在上面看到的,我希望,当我单击查看按钮时,它将被引导到列表页面,该行被检索。
我的 ViewClients :
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);
当我运行它时,我进入我的控制台后端[]
和前端,因为没有检索到该行,所以没有显示任何内容。请问如何解决?
解决方案
错误是,Get 方法不包含正文参数。正文参数仅在 POST 请求中可用。尝试使用查询参数,因为您将代码发送为?Code=
。
在后端,通过使用req.query.Code
而不是使用来获取代码req.body.Code
推荐阅读
- sql - Pl/ SQL 更新触发器,用于在对表进行更新操作时更新排名
- python - python AI的数据集预处理
- c - C vsnprintf() 忽略最后一个参数
- c - heapusage 检测到可能由 printf 引起的内存泄漏
- java - 在多次 POST/DELETE/PUT 后仅运行一次功能(例如清理)
- html - 复杂角材料表单元
- java - 无法在 Android Studio 中解析符号“R”但编译没有问题
- angular - Angular 7 - 在 For 循环中展开或折叠 Div
- java - 基本 Cucumber 测试项目 - 如何运行 java cucumber.api.cli.Main?
- shell - 在文件夹中存在的多个文件中将日期部分动态替换为当前日期 -15 天