React.js中this.props传URL跳转localhost的问题排查

嘿，我来帮你搞定这个狗狗图片链接的问题！你的代码里有两个核心问题导致跳转异常，咱们逐个拆解：

1. 状态传递与命名不匹配 #

• 首先，你的App组件里，获取到狗狗URL后用this.setState({ result_URL: dog_url })更新状态，但初始state定义的是dog_URL: undefined，字段名前后不一致；而且你根本没把这个状态值传递给Search组件，所以Search里的this.props.dog_url从一开始就是undefined。
• 另外，React里通常推荐用驼峰命名（比如dogUrl）来统一变量/状态名，避免大小写和下划线混用的混乱。

2. JSX属性写法错误 #

在Search组件的a标签里，你写了：

<a href="{this.props.dog_url}">{this.props.dog_url}</a>

在JSX语法中，如果你要给属性绑定JS表达式（比如props、state），不能用双引号包裹——双引号会把里面的内容当成纯字符串，所以浏览器会把{this.props.dog_url}当成字面量路径，拼在localhost地址后面，就出现了你看到的http://localhost:3000/%7Bthis.props.dog_url%7D（%7B和%7D是大括号的URL编码）。

修改后的完整代码 #

App.js #

import React, { Component } from 'react';
import Search from './components/Search';

class App extends React.Component {
  state = {
    dogUrl: undefined, // 统一驼峰命名
  }

  getDogs = async (e) => {
    e.preventDefault();
    try {
      const api_call = await fetch(`https://random.dog/woof.json`);
      const data = await api_call.json();
      this.setState({ dogUrl: data.url }) // 用统一的状态字段名
    } catch (err) {
      console.error('获取狗狗图片失败:', err);
    }
  }

  render() {
    return (
      <div className="container">
        {/* 把状态传递给Search组件 */}
        <Search getDogs={this.getDogs} dogUrl={this.state.dogUrl} />
      </div>
    );
  }
}

export default App;

Search.js #

import React from 'react';

class Search extends React.Component {
  render() {
    const { dogUrl } = this.props; // 解构props，代码更简洁
    return (
      <form onSubmit={this.props.getDogs}>
        <input type="text" name="q" placeholder="点击按钮获取狗狗图片..." />
        <br />
        <button type="submit"> Search </button> {/* 改用原生button，保证表单正常提交 */}
        <br />
        {/* 处理初始状态下dogUrl为undefined的情况，避免显示空链接 */}
        {dogUrl && (
          <p> Dog link: <a href={dogUrl} target="_blank" rel="noopener noreferrer">{dogUrl}</a> </p>
        )}
      </form>
    )
  }
}

export default Search;

额外优化点 #

• 加了try/catch捕获API请求的错误，避免请求失败时页面崩溃；
• 给a标签加了target="_blank"和rel="noopener noreferrer"，让链接在新标签页打开，同时符合安全规范；
• 用条件渲染{dogUrl && ...}，避免在还没获取到URL时显示无效的链接；
• 把自定义的<Button>改成了原生<button type="submit">，避免因未定义组件导致的报错。

现在点击Search按钮获取到狗狗URL后，链接就能正确跳转至图片地址啦！

内容的提问来源于stack exchange，提问作者Leia_Organa