Я работаю над приложением с полным стеком.Я хочу запросить информацию в моей базе данных и показать ее в другом поле ввода.Я успешно запросил свою базу данных и получил информацию, но я не могу поместить фактическую информацию в область ввода.
Из console.log я обнаружил, что это объект, и я искал учебные пособия, ноони все еще не помогают мне.Я могу преобразовать его в строку и поместить туда, но это мне не поможет, так как мне нужен определенный столбец - например, {"title": "Back to the Future"} - это похоже на мой, иЯ только хочу извлечь "Назад в будущее".
Я пытался с "Object.title", JSON.parse и затем пытался получить доступ к его свойствам, но все еще ничего.Я получаю неопределенность в лучшем случае.Вот код, о котором идет речь.
MainFile.jsx
import React, {Component} from 'react';
import './Control1.css';
import axios from "axios";
class editShowing extends React.Component{
constructor(props){
super(props);
this.state={
showingId: '',
title: '',
showingsList: [],
}
this.handleSubmit = this.handleSubmit.bind(this);
this.onChangeTitle = this.onChangeTitle.bind(this);
this.onChangeShowingID = this.onChangeShowingID.bind(this);
}
onChangeShowingID(event){
this.setState({showingId: event.target.value});
}
onChangeTitle(event){
this.setState({title: event.target.value});
}
handleSubmit(event){
event.preventDefault();
axios.get('/api/getShowings',
{
params: {
showingId: this.state.showingId
}
})
.then(response => {
const { showingsList } = response.data
this.setState({ showingsList });
console.log(showingsList.title)
})
}
render(){
const { showingsList } = this.state
return(
<div>
<form onSubmit={this.handleSubmit}>
<h1> A new title to test GitFlow </h1>
<input onChange = {this.onChangeShowingID} type = "text" name = "showingId" placeholder = 'hi' value = {this.showingId}></input>
<input onChange = {this.onChangeTitle} value = {showingsList} type = "text" name = "title" placeholder = "title" />
<button type = "submit">Submit</button>
</form>
</div>
)
}
}
export default editShowing;
Server.js bit
app.get('/api/getShowings', (req,res) => {
console.log("I communicate with server.js")
datalayer.getShowings(req.query.showingId,
(err, result) => {
res.send(result);
})
});
DataLayer.js bit
module.exports.getShowings = (showingId, callback) => {
console.log("I connect to datalayer")
let sql = `SELECT title FROM showings WHERE id = ?;`
console.log("SQL CONNECTS")
db.get(sql, [showingId], (err, res) => {
if (err){
throw err;
}
console.log(res)
return callback(null, res)
})
}
Подводя итог, я хочу поместить данные (только фактический заголовок, а не весь объект) "ShowingsList" в "ввод заголовка", и у меня есть много вариантов, но безрезультатно.Я изучаю React.JS в течение последних 2 недель.