#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. когда я добавляю фигурные скобки в конце, это говорит о том, что все еще отсутствует скобка.