Question

我正在处理全栈应用程序。我想查询数据库以获取信息，并在其他输入框中显示该信息。我成功查询了数据库并检索了信息，但是无法将实际信息放入输入区域。

在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位

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位

    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。

Answer 1

我很幸运，在发布解决方案5分钟后找到了解决方案。在数据层中，您需要从数据库中放入row.title或您需要的实际信息，而不是res。我的另一个错误是，在主jsx文件中，我将ShowingsList初始化为一个对象，因此将其更改为普通字符串，现在可以使用了。

ReactJS操作从SQLITE3数据库提取的对象数据

1 个答案: