Блог

Я создал страницу редактирования, которая пытается извлечь отдельный объект из моей базы данных MongoDB, используя ‘findById’ в бессерверной функции, размещенной на Vercel.

Данные ответа, которые я затем пытаюсь использовать для заполнения «значения» различных входных данных на этой странице «редактирования».

Однако я не получаю ответа от своего вызова (даже сообщения об ошибке, ни в моей консоли, ни в журналах функций на Vercel) — страница загружается успешно, но данные не вводятся во входные данные, они проходят как пустые. Я добавил журнал консоли для ответа, и подробности об этом приведены в редактировании ниже.

Стоит отметить, что URL — это идентификатор MongoDB для вызываемого объекта!

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

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

«Дочерний» и «родительский» компоненты — это просто способ перехода на страницу.

Мой «маршрут» через маршрутизатор React:

 <Route path="/edit/:id" component={EditDebt} />
  

Моя схема MongoDB:

 const SubmitDebtSchema = new Schema ({
  creditCard: String,
  personalLoan: String,
  provider: String,
  balance: Number,
  limit: Number,
  monthly: Number,
  interest: Number,
  borrowed: Number
});

module.exports = mongoose.model('submitdebts', SubmitDebtSchema);
  

Мой «дочерний» компонент, который использует реквизиты для заполнения ссылки с использованием идентификатора MongoDB ответа.

 <div className="debt-card-edit-container"><a className="debt-card-edit-link" href={`/edit/${props.edit}`}>Edit</a></div>
  

Мой «родительский» компонент, который заполняет реквизит при использовании вызова базы данных:

 <IndividualDebtCard edit={debt._id} />
  

Моя бессерверная функция «выборки»:

 const mongoose = require("mongoose");
const SubmitDebt = require("./submitDebtSchema");

require("dotenv").config();

mongoose.connect(process.env.MONGO_URI);
    
  module.exports = async (req, res) => {
      let id = req.params.id;
      await SubmitDebt.findById(id, function(err, submitdebts) {
        if (err) {
          console.log(err);
        }
        console.log(req.params.id)
        console.log(submitdebts);
        return res.status(200).json(submitdebts);
      });
  };
  

Наконец, и это самое главное, мой фактический компонент «редактировать» полностью…

     class EditDebt extends Component {
      constructor(props) {
        super(props)
    
        this.state = {
          provider: '',
          balance: '',
          limit: '',
          monthly: '',
          interest: '',
          borrowed: ''
        }
    
        this.onChange = this.onChange.bind(this);
      }
    
       componentDidMount() {
        axios.get("/api/fetchEditDebt")
          .then(response => {
            this.setState({
              provider: response.data.provider,
              balance: response.data.balance,
              limit: response.data.limit,
              monthly: response.data.monthly,
              interest: response.data.interest,
              borrowed: response.data.borrowed
            })
            console.log(res)
            console.log(this.state.provider)
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    
      onChange = (e) => {
            this.setState({ [e.target.name]: e.target.value})
        }
    
      render() {
    
        return (
          <section className="edit-debt-section">
            <div className="edit-debt-container">

    
<input type="text" value={this.state.provider} onChange=.  {this.onChange} />


            </div>
          </section>
        )
      }
    }
  

Извините за весь код, и, пожалуйста, дайте мне знать, если я пропустил что-то действительно важное в моем вопросе.

Спасибо

РЕДАКТИРОВАТЬ: я удалил ‘this.props.match.params.id «и попытался повторно запустить мой код.. Теперь я получаю следующую ошибку в своем серверном:

 2020-10-23T14:55:25.984Z    71f7b650-1a7d-42c2-953e-ff17edc22cb5    ERROR   Unhandled Promise Rejection     {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"TypeError: Cannot read property 'id' of undefined","reason":{"errorType":"TypeError","errorMessage":"Cannot read property 'id' of undefined","stack":["TypeError: Cannot read property 'id' of undefined","    at module.exports (/var/task/api/fetchEditDebt.js:12:23)","    at Server.<anonymous> (/var/task/___now_helpers.js:813:19)","    at Server.emit (events.js:315:20)","    at parserOnIncoming (_http_server.js:790:12)","    at HTTPParser.parserOnHeadersComplete (_http_common.js:119:17)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: TypeError: Cannot read property 'id' of undefined","    at process.<anonymous> (/var/runtime/index.js:35:15)","    at process.emit (events.js:327:22)","    at processPromiseRejections (internal/process/promises.js:209:33)","    at processTicksAndRejections (internal/process/task_queues.js:98:32)"]}
Unknown application error occurred
  

Замените свой код api axios этим.

 axios.get("/api/fetchEditDebt", { params: { id: this.props.match.params.id }})
      .then(response => {
        this.setState({
          provider: response.data.provider,
          balance: response.data.balance,
          limit: response.data.limit,
          monthly: response.data.monthly,
          interest: response.data.interest,
          borrowed: response.data.borrowed
        })
        console.log(res)
        console.log(this.state.provider)
      })
      .catch(function (error) {
        console.log(error)
      })
  

Может быть, добавьте дополнительный ‘/’ в URL вашего запроса?

axios.get("/api/fetchEditDebt/" this.props.match.params.id)