Нужен ли здесь Redux или можно обойтись без него? - PullRequest
Новая
       5

Нужен ли здесь Redux или можно обойтись без него?

0 голосов
/ 17 июня 2020
• 1000 вызов, который нажимают. На странице с деталями задачи я хочу напечатать название и описание задачи.

Я немного погуглил, и кажется, единственный способ сделать это - с помощью Redux? Или есть способ без использования Redux? Как это будет работать?

Все вызовы. js

{this.state.searchChallenges.map(challenge =>(
    <Link to={`/challengedetail/${challenge._id}`}>
     <Challengebox key={challenge._id} id={challenge._id} title={challenge.title} description= 
     {challenge.description}/>
    </Link>
))}

Challengedetail. js

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(){
        const challengeId = this.props.match.params.id       
        axios({
            method: "GET",
            url: `${process.env.REACT_APP_API_BASE}/challengedetail/${challengeId}`,
            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 error: ", 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/>
                        <Responsechallenge/>
                    </div>
                </div>
            </DefaultLayout>
        )
    }
}

export default Challengedetail

Прил. js

function App() {
  return (
    <div className="App">

    <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/signup" component={Signup} />
          <Route path="/login" component={Login} />
          <Route path="/profile" component={Profile} />
          <Route path="/allchallenges" component={Allchallenges} />
          <Route path="/friends" component={Friends} />
          <Route path="/startchallenge" component={Startchallenge} />
          <Route path="/challengedetail/:id" component={Challengedetail} />
          <Route path="/about" component={About} />
          <Route path="/todo" component={Todo} />
    </Switch>

    </div>
  );
}

НАЗАД 

// request challenge info
router.get("/challengedetail/:id", (req,res) => {
  Challenge
  .findById({req.params.id})
  .then(response => {
    console.log("Charles")
    res.json(response)
    console.log("Charles")
  })
  .catch(error => {
    res.json(error)
  })
})

ОШИБКИ В КОНСОЛИ 

xhr.js:178 GET http://localhost:3000/challengedetail/5ed6bbd9aef7f148c83baeb2 404 (Not Found)

Charles this is an error:  Error: Request failed with status code 404
        at createError (createError.js:16)
        at settle (settle.js:17)
        at XMLHttpRequest.handleLoad (xhr.js:61)

.Env файл НАЗАД: 

client_origin_a=http://localhost:3001
client_origin_b=https://localhost:3001

. Env файл FRONTEND: 

REACT_APP_API_BASE=http://localhost:3000

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Я предполагаю, что ваше приложение React работает на порту 3000. Итак, анализируя ошибку, я должен сказать, что ваша переменная среды REACT_APP_API_BASE равна undefined, из-за чего вы возвращаетесь к localhost:3000 или в противном случае переменная среды была ошибочно установлена ​​на localhost:3000, и, следовательно, вы не сможете задействовать свой серверный API.

Пожалуйста, проверьте переменную среды и убедитесь, что вы правильно используете свои серверные API.

0 голосов
/ 17 июня 2020

Конфигурация маршрута

Если вам нужно получить доступ к параметрам маршрута, сначала установите маршрут для принятия параметра. В вашем случае идентификатор - это все, что нужно. Ниже вы можете увидеть измененную конфигурацию маршрутизации. /challengedetail был обновлен до /challengedetail/:id. 

function App() {
  return (
    <div className="App">

    <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/signup" component={Signup} />
          <Route path="/login" component={Login} />
          <Route path="/profile" component={Profile} />
          <Route path="/allchallenges" component={Allchallenges} />
          <Route path="/friends" component={Friends} />
          <Route path="/startchallenge" component={Startchallenge} />
          <Route path="/challengedetail/:id" component={Challengedetail} />
          <Route path="/about" component={About} />
          <Route path="/todo" component={Todo} />
    </Switch>

    </div>
  );
}

Доступ к параметрам маршрута

Теперь с указанной выше конфигурацией компонент Challengedetail может проверить, находится ли route отправлено значение, соответствующее :id. Вы можете сделать это, обратившись к реквизитам и проверив объект match.

Пример: 

class Challengedetail extends React.Component {
    // constructor...

    componentDidMount(){
        // get id from url
        const challengeId = this.props.match.params.id;

        axios({
            method: "GET",
            url: `${process.env.REACT_APP_API_BASE}/challengedetail/${challengeId}`,
            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 error: ", error)
        })
    }

    // render...
}

С этим logi c при монтировании компонента вы извлекаете идентификатор из URL-адреса, а затем вызывает сервер, чтобы получить нужные данные.

Ошибки сервера

Итак, я только что понял, что вы обновили вопрос ... Я не Не думаю, что вы правильно настроили свое приложение в отношении REACT_APP_API_BASE. Вам необходимо иметь .env в папке root и создать значение REACT_APP_API_BASE.

Пример: 

REACT_APP_API_BASE=http://localhost:4000

Помните, что пользовательский интерфейс и Backend будут работать на разных портах, поэтому вам также нужны разные порты на localhost. 4000 - это просто пример в этом случае, убедитесь, что ваш Backend и UI - разные порты, я предполагаю, что у вас есть UI и Backend на одном и том же порту - это не сработает.

Посмотрите здесь, чтобы увидеть, как настроить вашу конфигурацию: https://create-react-app.dev/docs/adding-custom-environment-variables/.

...