Реакция: Попытка получить доступ к json из выборки, а затем передать этот результат в JSX - PullRequest
Новая
       0

Реакция: Попытка получить доступ к json из выборки, а затем передать этот результат в JSX

0 голосов
/ 03 марта 2020

Все здесь есть в выпадающем файле. Я хочу получить ответ. json (который является ссылкой на JPG), а затем передать его на изображение в нижней части возврата. Я следовал за этими предыдущими вопросами, но все еще не могу заставить его работать. Возвращает значение результата с помощью функции вызова fetch с другой страницы, React native

Я извлекаю (в приложении js) собаку, которая размножается в виде списка и запускает ее в { параметры}, который создает раскрывающийся список с каждой породой в списке (https://dog.ceo/api/breeds/list/all). Затем цель состоит в том, чтобы щелкнуть одну породу и отправить второй вызов API, чтобы получить jpg-адрес для этой конкретной c породы (https://dog.ceo/api/ $ {значение} / гончая / images / random). С текущим кодом я получаю правильный ответ : Объект {сообщение: "https://images.dog.ceo/breeds/akita/512px-Ainu-Dog.jpg", статус: "успех"}

Так что теперь мне нужно передать это значение в форму. 

export class Dropdown extends Component { 
    state = {
        value: 'None'
    }

    handleClick = (e) => {
        e.preventDefault();

        const { value } = e.target;
        const endpoint = `https://dog.ceo/api/breed/${value}/images/random`;
        fetch(endpoint)
            .then((response) => response.json() )
            .then((result) => {
                console.log(result) //returns the correct address I need
                this.setState({
                    value: result
                })
            })

    }

    render() {
        const options = Object.keys(this.props.breeds).map((breed) => {
            const name = breed;

        return (

            <option value={name}>{name}</option>
        )
    });

        return (
            <div>
                <form>
                    <label htmlFor="breed">Select a Breed</label>
                    <select name="breed"
                    value={this.state.value}
                    onChange={this.handleClick}
                    >

                        <option value="None">Select one...</option>

                        {options}
                    </select>
                </form>
                <img src={this.state.value} alt="dog selected by breed" />              
            </div>

Вот приложение. js, если это полезно 

export default class App extends Component {

  state = {
    breeds:[]
  }

  componentDidMount() {
    // fetch all the breeds and update breeds state
    fetch('https://dog.ceo/api/breeds/list/all')
      .then(res => res.json())
      .then(
        (result) => {
        this.setState({
          isLoaded: true,
          breeds: result.message,
          })
         });
       }

  render() {
    return (
      <div>
        <Dropdown breeds={this.state.breeds} />
      </div>
    )
  }
}

Ответы [ 3 ]

1 голос
/ 03 марта 2020

Я тупой. Я понял. Теперь работает. 

<img src={this.state.value.message} alt="dog selected by breed" />
0 голосов
/ 03 марта 2020

Я проверил ваш ответ и для показа изображения вам не нужно получать json формат. response.url включает в себя то, что вам нужно для изображения 

     fetch(endpoint)
      .then((response) => {
        this.setState({
          value: response.url
        })
      })
0 голосов
/ 03 марта 2020

попробуйте это: 

inside constructor:
this.setState({
  hasImageLoaded: false
});

и в handleClick 

fetch('your api url')
.then((response) => response.json())
.then((findresponse) =>{
    this.setState({
    imgUrl: findresponse.message,
    hasImageLoaded: true
  });
})

и внутри return: 

{
 this.state.hasImageLoaded ?
 <img src={this.props.imgUrl} alt="dog selected by breed" /> :
""
}
...