小编dev*_*vAR的帖子

所以我正在渲染一系列帖子。每个帖子都有一个与之关联的唯一用户 ID，我尝试在另一个 API 调用中使用该 ID 来返回该帖子的用户图像。

目前我的设置如下

渲染出帖子

             {data?.map((data) => (
                <div className="allpostsingle" key={data.id} onClick={() => sendTo(data.id)}>
                    <div className="allpostheader">
                        <img src={getUrl(data.user)}/>
                        <p>{data?.description}</p>
                    </div>
                </div>
              ))}

获取图片URL的函数

   const getUrl = async (id) => {
       let url = `http://127.0.0.1:8000/api/user/${id}/`
       const response = await fetch(url)
       const data = await response.json()
       const avatarurl = data.avatar
       return avatarurl
   }

问题是它返回的是一个承诺而不是 URL。我知道你可以将其设置为获取 url 的状态，但是这样每个帖子就不会是唯一的吗？

我只是想知道如何解决这个问题，或者是否有其他方法来解决这个问题。

因此，我正在从 React 向 Express 发出获取请求，并且 api url 需要参数，但我希望 url 的最后一位是动态的。我如何将参数从react发送到express中的api url？这是代码

反应

const [dynamic, setDynamic] = useState("somevalue")

  useEffect(() => {
    async function fetchData() { 
        const response = await fetch("/web")
        const data = await response.json()
        console.log(data)
    }
    fetchData()
  }, [dynamic])

快递.js

app.get("/web", async (req, res) => {
    const response = await fetch("https://alexa.com/api?Action=urlInfo&Url=")
      const data = await response.json()
      res.json(data)
})

基本上，我希望将动态状态值注入到 Express 中 URL 的末尾。

就像是

反应

const [dynamic, setDynamic] = useState("somevalue")

    async function fetchData() { 
        const response = await …

当我在项目根目录中创建.env.local文件时，它设置不正确。

在文件中，我有我的 API 密钥，如下所示

API_KEY=SOME_API_KEY

然后，当我尝试使用process.env.API_KEY在getServerSideProps中访问它时，它不起作用。当我console.log(process.env.API_KEY)我得到undefiend。我认为是因为文件设置不正确？

module.exports = {
  reactStrictMode: true,
}