Question

我正在尝试找出我在Challengedetail的ComponentDidMount文件中应该包含的“ id”：url:${process.env.REACT_APP_API_BASE}/challengedetail/${id}

每当在Allchallenges文件中单击挑战时，都会打开一个带有ID的Challengedetail页面，该ID为要单击的确切挑战。我要在Challengedetail页面上打印挑战的标题和描述。

我在Google周围搜索了一下，看来唯一的方法就是使用Redux？还是有一种不用Redux的方法？那怎么办？

Allchallenges.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

App.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文件BACKEND：

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

.Env文件前：

REACT_APP_API_BASE=http://localhost:3000

Answer 1

路由配置

如果需要访问路由参数，请首先设置路由以接受参数。在您的情况下，只需一个ID。在下面您可以看到编辑后的路由配置。 /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组件可以检查路由中是否已发送与: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...
}

使用这种逻辑，在安装组件时，您将从URL中提取ID，然后调用服务器以获取所需的数据。

服务器错误

因此，我刚刚意识到您已更新了问题...我认为您没有正确设置关于REACT_APP_API_BASE的应用程序。您需要在根文件夹中有一个.env并创建REACT_APP_API_BASE值。

示例：

REACT_APP_API_BASE=http://localhost:4000

记住UI和后端将在不同的端口上运行，因此您在本地主机上也需要不同的端口。 4000只是这种情况下的一个示例，请确保您的Backend和UI是不同的端口，我的猜测是您的UI和Backend都在同一个端口上-无法正常工作。

对此进行查看，以了解如何设置配置：https://create-react-app.dev/docs/adding-custom-environment-variables/。

Answer 2

我假设您的React应用正在端口3000上运行。因此，分析错误时，我必须说您的环境变量REACT_APP_API_BASE为undefined返回到localhost:3000，否则环境变量被错误地设置为localhost:3000，因此您将无法使用后端API。

请检查您的环境变量，并确认您正确使用了后端API。

这里需要Redux还是不需要它？

2 个答案: