React组件中href参数{name}显示为[object Object]的修复方案

嘿，这个问题其实是个很容易犯的小错误——你不小心把name变量包装成对象了！

问题根源 #

看你写的这段代码：

<a href ={"/projects " + {name}}>

在JSX的表达式大括号{}里面，你又用{name}包裹了变量，这相当于创建了一个{name: name}的对象。当JavaScript把字符串和对象拼接时，会默认把对象转换成"[object Object]"，这就是为什么你的URL变成了http://localhost:1234/projects%20[object%20Object]。

而h1标签里的{name}是正确的，因为那是直接在JSX大括号里引用变量，没有额外嵌套对象。

修复方法 #

你只需要去掉变量外层多余的大括号，直接使用name即可，推荐用ES6模板字符串让代码更清晰（还能顺便去掉原URL里不必要的空格）：

const ResultItem = ({ category, name }) => (
  <div className="projects animated fadeInUp">
    <a href={`/projects/${name}`}>
      <h1 style={project_box_h1}>{name}</h1>
    </a>
    <div className={`category--${category}`} />
  </div>
);

如果不习惯模板字符串，也可以用普通字符串拼接：

<a href={"/projects/" + name}>

核心要点就是：JSX的大括号已经是用来嵌入JS表达式的入口了，里面直接写变量、函数调用等表达式就行，不需要再给变量套一层大括号~

内容的提问来源于stack exchange，提问作者Piotr Żak