React 将获取的数据传递给另一个组件

Question

喂！

我的反应代码有问题。我的任务是从 iTunes API 调用，然后我处理数据。但是我不能将它保存为一个变量以便以后可以传递它。

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。 我尝试了几种方法，但始终没有得到结果。

请帮帮我。

Answer 1

请记住，React 中的数据流是单向的。如果您想在您的应用程序周围共享数据，则搜索组件不应该是获取数据的组件。这应该留给父组件（可能是 App）。该组件应该有一个处理获取请求的函数，然后您可以将该函数的 reference 传递给搜索组件，以便在单击按钮时调用。然后，一旦加载了该数据，父 (App) 组件就可以将所有相关数据向下传递给子组件。

这是基于您现有代码的快速模型：

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} />
    )
  }
}

Answer 2

请说明你的意思

但如果我想保存它以供以后使用，我只会得到空的 console.log 回来

我认为处理您的问题的正确方法是将回调函数传递给组件的 props，每当您按下搜索并找到搜索结果时都会调用该回调函数，如下所示：https://codesandbox.io/s/xpq171n1vz

编辑：请注意，虽然此答案已被接受并且是解决您的问题的一种方法，但 Andy 的答案包含关于如何实际构建组件的可靠而详尽的建议。