React js: Показать определенный элемент из объекта во внешнем интерфейсе

#javascript #node.js #reactjs #frontend

Вопрос:

Поэтому я создал базу данных, которая работает и в которой есть 31 объект.

Теперь я подключил базу данных к своему интерфейсу и зарегистрировал ее там в консоли, как вы можете видеть здесь:

введите описание изображения здесь

Теперь предположим, что я хочу отобразить текст из объекта с идентификатором : 1 там. Что было бы в данном случае «Источником». Он должен отображаться под моим полем h1 с надписью «Показать мне текст из объекта с идентификатором 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;
 

Комментарии:

1. У вас useEffect должен быть пустой массив зависимостей: useEffect(() => do something, []); так, чтобы он загружал данные только при первом рендеринге.

Ответ №1:

Вы можете использовать forEach/map/фильтр для циклического просмотра списка элементов, и когда он найдет тот, который соответствует идентификатору, который вы ищете, отобразите его.

Фильтрующий раствор:

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

Фильтр-это самое простое простое решение, но, возможно, если вы хотите что-то сделать с другими элементами, которые вы не визуализируете, потому что идентификатор не тот, который вы ищете, решением будет цикл отображения.

Картографическое решение:

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

Комментарии:

1. Большое вам спасибо за ответ. Решение карты работает, но решение фильтра не работает. Возможно ли, что вы допустили синтаксическую ошибку, пропустив фигурные скобки или что-то в этом роде?

2. @Liebertosan Я думаю, что там была дополнительная скобка. Я отредактировал свой ответ, теперь он должен работать правильно!

3. да, я вам очень благодарен 🙂

Ответ №2:

вы можете использовать функцию карты

 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>

    );
}

 

Комментарии:

1. Почему вы не используете map в своем ответе?

2. 1) Это не совсем одно и то же. Один изменяет массив, другой возвращает новый массив. 2) В вашем ответе говорится «используйте map функцию» , но вы не используете ее в своем ответе.

3. @Энди рад это знать! forEach фактически возвращает неопределенное значение.

4. Большое спасибо. Но это показывает только идентификатор нужного мне объекта, он не возвращает текст, как я хочу

5. Вам нужно больше ясности в том, как обращаться к объектам и работать над своей логикой. я внес изменения, если это решит вашу проблему, отметьте ответ как ответ

Ответ №3:

Предполагая, что ваши идентификаторы различны, вы можете сделать вот так. yourId это то, что вы хотите найти.

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

 

Комментарии:

1. Это правильный синтаксис? Потому что, когда я пытаюсь скопировать его вот так, он показывает мне синтаксическую ошибку

2. Я по ошибке оставил закрывающие фигурные скобки. По сути, я просто хотел показать, что JSX возвращается. Где именно вы получаете синтаксическую ошибку?

3. когда я добавляю фигурные скобки в конце, это говорит о том, что все еще отсутствует скобка.