React.js - передать действительный URL с this.props вместо ссылки на localhost?

Question

Я работаю над небольшой программой в React.js.Я пытаюсь передать URL с помощью {this.props}, но вместо ссылки на реальную веб-страницу ссылка ведет на страницу в localhost.Я пытался выяснить, что происходит, но я не понимаю, почему ссылка не ведет.

Я создаю приложение, которое генерирует URL-адрес, по которому пользователь нажимает, чтобы вести прямо.на jpeg / gif.

JSON URL (случайные изображения собак): https://random.dog/woof.json

Вот мои коды:

App.js

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

class App extends React.Component {
  state = {
    dog_URL: undefined,
  }
  getDogs = async (e) => {
    e.preventDefault();
    const api_call = await fetch(`https://random.dog/woof.json`);
    const data = await api_call.json();
    const dog_url = data.url;
    this.setState({
      result_URL: dog_url
    })
  }
  render() {
    return (
      <div className="container">
          <Search 
            getDogs={this.getDogs} 
        </div>

      );
  }
}

export default App;

импорт React из'act ';

class Search extends React.Component {
    render() {
        return (
            <form onSubmit={this.props.getDogs}>
                <input type="text" name="q" placeholder="search for..." />
                <br />
                <Button> Search </Button>
                <br />
<p> Dog link: <a href="{this.props.dog_url}">{this.props.dog_url}</a> </p>
            </form>
            )
    }
}

export default Search;

Ожидаемый результат: пользователь может нажать на ссылку

Фактический результат: ссылка ведет к http://localhost:3000/%7Bthis.props.dog_url%7D

Кто-нибудь может дать некоторые указания или предложения относительно того, почему это не будет работать?

Answer 1

<p> Dog link: <a href="{this.props.dog_url}">{this.props.dog_url}</a> </p>

Я не верю, что "{this.props.dog_url}" нужно заключать в кавычки.Скорее просто {this.props.dog_url} должно работать, учитывая, как работает интерполяция переменных JSX.Возможно ли, что это может быть причиной странного поведения?