所以我建立了一個正在運行的資料庫，其中有 31 個物件。
現在我將資料庫連接到我的前端并將其記錄在控制臺中，如下所示：
現在假設我想在那里顯示 id 為 1 的物件中的文本。在這種情況下，這將是“來源”。它應該顯示在我的 h1 欄位下，上面寫著“顯示 ID 為 1 的物件中的文本”。
我如何實作這一目標？
這是我的代碼：
后端（index.js）：
const express = require('express');
const bodyParser = require ('body-parser');
const app = express();
const mysql = require('mysql');
const cors = require('cors');
const db = mysql.createPool({
host: "localhost",
user: "root",
password:"mypassword",
database:'myDatabase',
});
app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({extended: true}))
app.get('/api/get', (req,res)=>{
const sqlSelect = 'SELECT * FROM myDatabase.signaldb;'
db.query(sqlSelect, (err,result)=> {
res.send(result);
if (err) console.log(err);
})
})
app.listen(3001, () => {
console.log("running on port 3001")
})
前端（App.js）
import Axios from 'axios';
import React, {useState, useEffect} from "react";
const App = () => {
const [signalList, setsignalList] = useState([]);
useEffect(()=> {
Axios.get("http://localhost:3001/api/get").then((response) =>
{
//log data
console.log("response data: ");
console.log(response.data);
setsignalList(response.data)
})
});
return (
<div>
<h1>Show me Text from object with id 1</h1>
</div>
);
}
export default App;
uj5u.com熱心網友回復：
假設您的 ID 是不同的，您可以這樣做。yourId是您要搜索的內容。
return (
<div>
<h1>(signalList.filter(obj => obj.id == yourId))[0].text)</h1>
</div>
);
}
uj5u.com熱心網友回復：
你可以使用地圖功能
const [signalList, setsignalList] = useState([]);
useEffect(()=> {
Axios.get("http://localhost:3001/api/get").then((response) =>
{
//log data
console.log("response data: ");
console.log(response.data);
setsignalList(response.data)
})
//please add empty array if you want to just execute this function once on mount
},[]);
return (
<div>
<h1>{ signalList.map((e,i)=> e.id==1 ? e.id : '' }</h1>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/346417.html
標籤：javascript 节点.js 反应 前端
上一篇：根據ID映射答案
下一篇：提交表單上不顯示警報訊息