无法将变量作为 url 参数传递[关闭]答案

【问题标题】：can't pass variable as url parameter [closed]无法将变量作为 url 参数传递[关闭]
【发布时间】：2021-04-25 12:31:30
【问题描述】：

下面的代码有点问题：

function SidebarChat() {
 const [seed, setseed] = useState("")
useEffect(() => {
    setseed(Math.floor(Math.random() *  5000)); 
}, []);

return (
    <div className="sidebarChat">
        <Avatar src={'https://avatars.dicebear.com/api/human/${seed}.svg'}  />
    </div>
)

}

我无法在 URL 中传递${seed}。

当我通过时，它在 URL 行中显示错误，并且 '${seed}' 被视为硬编码字符串。

【问题讨论】：

你使用 quotes 作为你的字符串，你应该使用 backticks 作为模板文字：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
还要具体说明您的问题，而不是仅仅说它不起作用。我假设你的意思是“而不是出现在字符串中的变量，我真的得到了“${seed}”

标签： javascript reactjs url parameter-passing es6-modules

【解决方案1】：

您在表达 src 时使用引号而不是反引号，因此 ${seed} 不会被解释为应有的样子

解决问题：

<Avatar src={`https://avatars.dicebear.com/api/human/${seed}.svg`}  />

【讨论】：

【解决方案2】：

我认为您需要将字符串 const [seed, setseed] = useState("") 删除为 const [seed, setseed] = useState()

【讨论】：

不，它没有用

【解决方案3】：

要在字符串中添加变量，您必须将其放入模板文字中，如下所示：

`https://avatars.dicebear.com/api/human/${seed}.svg`

或

你也可以在单引号中使用变量，如下所示：

'https://avatars.dicebear.com/api/human/' + seed + '.svg'

了解更多关于template literals

【讨论】：