Reactjs :更好地管理输入框并显示来自 rest 响应的多个项目

Question

>我正在尝试在reactjs前端显示rest-api响应。

例如，我的 rest-api 端点是：

<http://url/searchquery/<db_name>/<sql_query>

一个活的例子是：

http://127.0.0.1:5002/sqlquery/A123vSearch/SELECT DATE,LABEL_NUMBER,FILENAME FROM FILE_INFO_SEARCH WHERE FILENAME MATCH 'C:/Test_Software/opencv_world320.dll'

在上面的例子中，我有两个问题：

1) 我将如何要求用户输入两个变量值(1 表示db_name，1 表示 sql_query)？我应该使用两个输入框还是应该在一个框中使用"/"斜杠分隔符，这样更容易维护？

2)如果有人将sql_query从SELECT DATA, LABEL_NUMER更改为SELECT *如何，我会在网页中显示所有表格列表吗？

这是我当前的"搜索查询.js"文件

export default class SearchQuery extends React.Component{
constructor(){
super();
this.state = {
query : "SELECT DATE,LABEL_NUMBER,FILENAME FROM FILE_INFO_SEARCH WHERE FILENAME MATCH 'opencv_world320.dll'",
};
}
componentDidMount(){
this.SearchQuery();
}

updateSearch(){
this.setState({query: this.refs.query.value});
this.SearchQuery(this.refs.query.value);
}
render(){
var tables = _.map(this.state.tables, (table) => {
return  <li>{table.FILENAME}</li>; 

return <div align="center">
<br/><br/>
<input ref="query" onChange={(e) => {this.updateSearch();}} type="text" value={this.state.query} />
<br/><br/>

<ul>{tables}</ul>
</div>;
}
SearchQuery(query = "SELECT DATE,LABEL_NUMBER,FILENAME FROM FILE_INFO_SEARCH WHERE FILENAME MATCH 'opencv_world320.dll'"){
var url = `http://127.0.0.1:5002/sqlquery/AvSearch/${query}`;
Request.get(url).then((response) => {
console.log(response);
this.setState({
tables: response.body.output, 
total: response.body.totalResults
}); 
});
}
}

如果我使用我在实时示例中提到的标准查询，上面的代码工作正常，但如果我将查询用作"SELECT *"，则不起作用

这是我的 API 响应：

{
"output": [
{
"CLIENT_NAME": "dusii", 
"FILENAME": "C:/Test_Software/opencv_world320.dll", 
"FILE_DATE": "2016-12-23 15:56:17", 
"LABEL_NUMBER": "11", 
"PERM": "----------", 
"SIZE": "39.91 MB", 
"USER": "srt/None"
}, 
}

我知道需要更改某些内容以表格形式显示项目数组，只是我不知道该怎么做......这条线的东西<li>{table.FILENAME}</li>

Answer 1

1-我建议使用两个输入字段，仅仅是因为这是两个信息，并且您不会在一个字段中管理两个信息，它只会增加您尝试管理它所花费的时间。

2-您可以使用选择列表来选择要选择的字段..作为响应，理论上您将列名作为json响应的ID。

注意：在您绘制的映射字段中，添加一个键

注意2：搜索操作应该与按钮单击绑定，否则在每个用户输入上，您都会向服务器发送请求......并且您不使用任何库来管理您的副作用，例如Redux使用flux控制全局应用程序，以及Redux-saga用于副作用。

您的问题标题与您的问题不匹配，如果您可以更改它

为了控制你的响应，你可以使用这篇文章中描述的方法，你可以迭代object.keys到键。