ПОЛУЧИТЬ данные из базы данных с помощью ComponentDidMount - PullRequest
Новая
       2

ПОЛУЧИТЬ данные из базы данных с помощью ComponentDidMount

1 голос
/ 17 июня 2020

Я пытаюсь подключить данные из моей базы данных с помощью componentDidMount. Проблема в том, что он не дает никакого ответа и показывает ошибку catch в консоли. Я думаю, мой URL-адрес может быть неправильным? Кто-нибудь может посмотреть?

url: $ {process.env.REACT_APP_API_BASE} / challengedetail /: id

Ошибка в консоли: GET http://localhost: 3000 / Challengedetail /: id 404 (Не найдено) 

import React from 'react'
import DefaultLayout from "../layout/Default"
import './Challengedetail.css'
import Responsechallenge from '../components/Responsechallenge'
import axios from "axios"
import TakeChallenge from "../components/Takechallenge"

class Challengedetail extends React.Component {
    constructor() {
        super()

        this.state = {
            title:"",
            description:"",
            responses: []
        }
    }

    componentDidMount(){
        // debugger
        axios({
            method: "GET",
            url: `${process.env.REACT_APP_API_BASE}/challengedetail/:id`,
            withCredentials: true
        })
        .then(response => {
            console.log(response.data)
            this.setState({
                title: response.data.title,
                description: response.data.description
            })
        })
        .catch(error => {
            console.log("Charles this is an ffffffffffferror: ", error)
        })
    }

    render() {
        return (
            <DefaultLayout>
                <div className="challengedetailpage">
                    <div className="headercontainer">
                        <div className="challengesectionbox">
                            <h1>{this.state.title}charles</h1>
                            <p>{this.state.description}ffff</p>
                        </div>

                        <div className="takechallengebox">
                            <TakeChallenge/>
                        </div>
                    </div>

                    <div className="responsechallenges">
                        <Responsechallenge/>
                        <Responsechallenge/>
                    </div>
                </div>
            </DefaultLayout>
        )
    }
}

export default Challengedetail

Все вызовы. js

<Link to={`/challengedetail/${challenge._id}`}>
                                        <Challengebox 
                                            key={challenge._id} 
                                            id={challenge._id} 
                                            title={challenge.title} 
                                            description={challenge.description}
                                    />
                                </Link>

1 Ответ

1 голос
/ 17 июня 2020

В основном вы вызываете маршрут, которого не существует.

Другими словами, если маршрут выглядит так на вашем сервере: /challengedetail/:id

, то на вашем внешнем end, вместо :id, вы должны передать динамическое c значение id так:

${process.env.REACT_APP_API_BASE}/challengedetail/${id}

или статически это могло бы выглядеть так:

${process.env.REACT_APP_API_BASE}/challengedetail/123456789

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

Надеюсь, это поможет.

...