Javascript 使用ComponentDidMount从数据库获取数据

我正在尝试使用componentDidMount从数据库装载数据。问题是它没有给出任何响应，并且在控制台中显示catch错误。我想我的url可能不正确？有人能看一下吗

url:${process.env.REACT\u APP\u API\u BASE}/challengedetail/：id

控制台中的错误：GET 404（未找到）

---

从“React”导入React
从“./layout/Default”导入默认布局
导入“./Challengedetail.css”
从“../components/Responsechallenge”导入Responsechallenge
从“axios”导入axios
从“./组件/TakeChallenge”导入TakeChallenge
类Challengedetail扩展了React.Component{
构造函数（）{
超级（）
此.state={
标题：“，
说明：“，
答复：[]
}
}
componentDidMount（）{
//调试器
axios({
方法：“获取”，
url:“${process.env.REACT\u APP\u API\u BASE}/challengedetail/：id`，
证书：正确
})
。然后（响应=>{
console.log（response.data）
这是我的国家({
标题：response.data.title，
描述：response.data.description
})
})
.catch（错误=>{
log（“这是一个FFFFFFFFFFF错误：”，错误）
})
}
render（）{
返回(
{this.state.title}查尔斯
{this.state.description}ffff

)
}
}
导出默认Challengedetail

---

Allchallenges.js

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

---

基本上，您正在调用一条不存在的路由

换句话说，如果路由在后端看起来像这样：

/challengedetail/：id

然后在前端，您将传递

id

的动态值，而不是

：id

，如下所示：

${process.env.REACT\u APP\u API\u BASE}/challengedetail/${id}

或者从静态角度看，它可能是这样的：

${process.env.REACT\u APP\u API\u BASE}/challengedetail/123456789

我不能确切地告诉您需要传递什么id，这取决于您希望从数据库中获取什么。在您的情况下，它可能是

challengedetail

的

id

---

希望有帮助。

编码字符串时，应遵循以下规则：字母数字字符“a”到“z”、“a”到“z”以及“0”到“9”保持不变。特殊字符“.”、“-”和“*”保持不变。空格字符“”被转换为加号“+”。所有其他字符都是不安全的，首先使用某种编码方案将其转换为一个或多个字节。所以在你的结肠之前是不安全的。还有一件事是，当您得到404时，您可以启动后端并运行。我在我的问题中添加了一些额外的代码。这是我在主allchallenges文件中的代码。每当用户单击质询时，将打开challengedetail页面。我现在遇到的问题是，我没有任何挑战。\我的Challengedetail文件中有id，因此我不知道如何调用id的动态值。知道我如何解决这个问题吗？这似乎是一个不同的问题，现在一切都取决于你如何构建你的应用程序。我相信我们在这个问题上找到了解决你问题的办法。您的新问题更多的是在React中将数据从一个组件传递到另一个组件。看来

Challengebox

既不是

Challengedetail

的孩子，也不是父母，所以我假设现在您可能需要使用

Redux

等工具。你可能想写一个新的问题，专门询问这个问题，并更详细地概述你的应用程序结构。我希望有道理。谢谢。我再问一个问题。我给了你一票，请也给我一票。谢谢

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