ReactJS中字符串内JS表达式失效问题求助

嘿，我看你这问题是模板字符串没正确解析变量导致的——虽然你能正常打印出chosenIpAddress的值，但拼接URL时变量却没生效，最终变成了http://:8081，这大概率是写法上的小疏漏，咱们一步步来解决：

问题出在哪？ #

看你写的代码：

const socket = socketClient(`http:// ${chosenIpAddress} :8081`);

这里${chosenIpAddress}前后加了多余的空格，模板字符串会把这些空格原封不动保留下来，生成的URL会变成http:// 192.168.x.x :8081——这种带空格的URL本身就无效，甚至可能因为空格干扰导致变量解析失败，直接变成http://:8081。

直接修正的方法 #

把变量前后的空格删掉，让模板字符串干净地拼接：

import { chosenIpAddress } from './socketEvents.js';
// 去掉变量前后的空格，确保URL格式规范
const socket = socketClient(`http://${chosenIpAddress}:8081`);

这样就能生成类似http://192.168.1.100:8081的有效URL了。

额外排查点（以防万一） #

虽然你说能打印变量，但还是可以快速确认这两点：

• 导出导入是否匹配：检查socketEvents.js里的导出方式，如果是默认导出（export default chosenIpAddress），那导入得写成import chosenIpAddress from './socketEvents.js'，不能加花括号；如果是命名导出（export const chosenIpAddress = ...），那你的导入写法是对的。
• 变量赋值时机：如果chosenIpAddress是异步获取的（比如从接口、localStorage异步读取），那可能在创建socket的时候变量还没赋值。这种情况得等变量拿到值再初始化socket，比如用async/await：

async function initSocket() {
  // 假设chosenIpAddress是返回Promise的异步操作
  const ip = await chosenIpAddress;
  const socket = socketClient(`http://${ip}:8081`);
}
initSocket();

快速验证 #

你可以先在创建socket前打印一下拼接后的URL，确认格式是否正确：

console.log(`http://${chosenIpAddress}:8081`);

如果打印出来的是正确的IP加端口，那传入socketClient就没问题啦！

内容的提问来源于stack exchange，提问作者Richard KeMiKaL GeNeRaL Denton