Javascript 我不能在react JS中搜索并从PostgreSQL中获取数据

索引js

const express = require("express");
const app =express();
const cors =require("cors");
const pool = require("./db");

app.use(cors());
app.use(express.json);

app.get("/data", async (req, res) => { //async to make the process fast (await)
try {
   const newData= await pool.query( "SELECT * FROM interactions"); 
   //js2xmlparser.parse('newData',newData);

  
    
} catch (err) {
    console.error(err.message);
    
}
});

search.js

const express = require("express");
const app =express();
const cors =require("cors");
const pool = require("./db");

app.use(cors());
app.use(express.json);

app.get("/data", async (req, res) => { //async to make the process fast (await)
try {
   const newData= await pool.query( "SELECT * FROM interactions"); 
   //js2xmlparser.parse('newData',newData);

  
    
} catch (err) {
    console.error(err.message);
    
}
});

mport React,{Fragment,useEffect,useState} from "react";
import jsontoxml from "jsontoxml";
//import * as JsonToXML from "js2xmlparser";

const ListInteract =() => {

const[interactions,setinteractions] = useState([])

    const getinteractions = async () => {
        try {

            const response = await fetch ("http://localhost:3000/data")
            const data = await response.json();
          // const convert= console.log(JsonToXML.parse("data", this.data));
          // jsontoxml.escape(data);
           console.log(data);
           setinteractions(data);
            
        } catch (err) {
            console.error(err.message)
            
        }
    }
    useEffect (() => {

        getinteractions();

    },[]); //[] it to do one


return <Fragment>

 <label>drugcode</label> <input type="text" class = "mt-5"/>
 <label>diseasecode</label> <input type="text"/>
 <label>type</label> <input type="text"/> <button class="btn btn-success">Search </button>

<table class="table table-hover mt-5 text-center">
    <thead>
      <tr>
        <th>ID</th>
        <th>description</th>
        <th>drugcode</th>
        <th>deasasecode</th>
        <th>type</th>
        
      </tr>
    </thead>
    <tbody>

     {interactions.map(interact => (
   <tr key={interact.id}>
       <td>{interact.id} </td>
       <td>{interact.decription} </td>
       <td>{interact.drugcode} </td>
       <td>{interact.diseasecode} </td>
       <td>{interact.type} </td>

   </tr>

     )
        
        )}
    </tbody>
  </table>

</Fragment>
};

export default ListInteract;

mport React，{Fragment，useffect，useState}来自“React”；
从“jsontoxml”导入jsontoxml；
//从“js2xmlparser”导入*作为JsonToXML；
常量ListInteract=（）=>{
常量[interactions，setinteractions]=useState（[]）
const getinteractions=async（）=>{
试一试{
const response=等待获取（“http://localhost:3000/data")
const data=wait response.json（）；
//const convert=console.log（JsonToXML.parse（“data”，this.data））；
//jsontoxml.escape（数据）；
控制台日志（数据）；
SET交互（数据）；
}捕捉（错误）{
控制台错误（错误消息）
}
}
useffect（（）=>{
getinteractions（）；
}，[]）；//[]这是一个很好的方法
返回
药典
疾病代码
类型搜索
身份证件
描述
药典
死亡密码
类型
{interactions.map（interaction=>(
{interact.id}
{interact.description}
{interact.drugcode}
{interact.diseasecode}
{interact.type}
)
)}
};
导出默认列表；

• 我有3个文本字段，我把数据放在其中，药物代码&疾病代码&类型*

• 当我把三个数据放在文本中时，我的目标是全选并在表格中显示*

---

例：表中药物代码=222，疾病代码=333，类型=1我想要所有数据 id=1 description=“good”药品代码=222，疾病代码=333类型=1

---

• 在我把数据放在文本中之后，当我点击它时，我有按钮搜索 它将显示表中的所有数据*

***谢谢大家***