React js：在前端显示对象中的某些元素

Question

所以我建立了一个运行的数据库，里面有 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;

Answer 1

可以使用地图功能

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.text : '' }</h1>
      
    </div>

    );
}

Answer 2

假设您的 ID 不同，您可以这样做。 yourId就是你要搜索的。

 return (
    <div>
      <h1>(signalList.filter(obj => obj.id == yourId))[0].text)</h1>
    </div>
    );

Answer 3

您可以使用 forEach/map/filter 在元素列表中循环，当它找到与您要查找的 ID 匹配的元素时，渲染它。

过滤解决方案：

return (
  <div>
    <h1>{signalList.filter(obj => obj.id == yourId)[0].text}</h1>
  </div>
);

过滤器是最简单的直接解决方案，但也许如果您想对其他元素执行某些操作但由于 ID 不是您要查找的元素而未渲染，地图循环可能是解决方案。

图解：

return (
  <div>
    {signalList ? signalList.map(obj => obj.id == yourId ? <h1>{obj.text}</h1>) : DO SOMETHING ELSE}
  </div>
);

React js：在前端显示对象中的某些元素

React js: Show certain element from object in frontend

javascript

frontend

node.js

reactjs