Реагировать на передачу выбранных данных другому компоненту - PullRequest
Новая
       8

Реагировать на передачу выбранных данных другому компоненту

0 голосов
/ 10 ноября 2018

Hy!

У меня проблема с кодом реагирования. Моя задача - позвонить из iTunes API, что я делаю с fetch, а затем обрабатываю данные. Но я не могу сохранить его как переменную, чтобы иметь возможность передать его позже. 

import React, { Component } from 'react';

class SearchField extends Component{
  constructor(props) {
  super(props);
  this.state = {value: ''};

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange = (event) => {
  this.setState({value: event.target.value});
}

handleSubmit = (event) => {
  event.preventDefault();
  fetch(`https://itunes.apple.com/search?media=music&term=${this.state.value.toLowerCase()}`)
  .then((resp) => resp.json())
  .then(searchRes => searchRes.results[0].artistName)
  .catch(err => console.log(err));
}

render() {
return(
  <section className="hero is-primary">
    <div className="hero-body">
      <div className="container">
        <form onSubmit={this.handleSubmit}>
          <input className="input is-primary" type="text" value={this.state.value} onChange={this.handleChange} placeholder="Search for artist" />
          <input className="button is-info" type="submit" value="Search" />
        </form>
      </div>
    </div>
  </section>
)
}
}
export default SearchField;

Мне нужно будет использовать полученные данные позже, мне просто нужно имя исполнителя. Если я записываю значение (searchRes.results [0] .artistName, я получаю правильное значение, но если я хочу сохранить его для дальнейшего использования, я получаю только пустой console.log обратно. Я перепробовал несколько подходов, но так и не получил свой результат.

Помоги мне, пожалуйста.

Ответы [ 2 ]

0 голосов
/ 10 ноября 2018

Помните, что поток данных в React однонаправленный . Если вы хотите поделиться данными вокруг своего приложения, компонент поиска не должен быть компонентом, который извлекает данные. Это должно быть оставлено на родительский компонент (может быть, приложение). Этот компонент должен иметь функцию, которая обрабатывает запрос на выборку, и затем вы можете передать ссылку на эту функцию в поисковый компонент для вызова при нажатии кнопки. Затем, после загрузки этих данных, родительский компонент (приложение) может передать все соответствующие данные дочерним компонентам.

Вот быстрый макет, основанный на вашем существующем коде: 

class Search extends {

  constructor(props) {
    super(props);
    this.state = { url: '' };
    this.handleKey = this.handleKey.bind(this);
  }

  handleKey(e) {
    const url = e.target.value;
    this.setState({ url });
  }

  render() {
    const { url } = this.state;

    // grab the function passed down from App
    const { fetchData } = this.props;
    return (
      <input onKeyUp={this.handleKey} value={url} />

      // Call that function with the url when the button is clicked
      <button onClick={() => fetchData(url)}>Click</button>
    )
  }
}


class App extends Component {

  constructor(props) {
    super(props);
    this.state = { data: [] };
    this.fetchData = this.fetchData.bind(this);
  }

  // App contains the fetch method
  fetchData(url) {
    fetch(url)
      .then(res => res.json())

      // Update the App state with the new data
      .then(data => this.setState({ data });
  }

  render() {
    const { data } = this.state;

    // Sanity check - if the state is still empty of data, present
    // a loading icon or something
    if (!data.length) return <Spinner />

    // otherwise return the rest of the app components
    // passing in the fetch method as a prop for the search component
    return (
      <OtherComponent data={data} />
      <Search fetchData={this.fetchData} />
    )
  }
}
0 голосов
/ 10 ноября 2018

Пожалуйста, укажите, что вы подразумеваете под

но если я хочу сохранить его для дальнейшего использования, я получаю только пустой console.log назад

Я думаю, что правильный способ справиться с вашей проблемой - передать функцию обратного вызова реквизиту вашего компонента, который вызывается всякий раз, когда вы нажимаете кнопку поиска и обнаруживается результат поиска, например: https://codesandbox.io/s/xpq171n1vz

Изменить: Обратите внимание, что хотя этот ответ был принят и является способом решения вашей проблемы, ответ Энди содержит твердые и подробные советы о том, как на самом деле структурировать ваши компоненты.

...