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

嘿

我的react代码有问题。我的任务是从iTunesAPI调用数据，然后处理数据。但是我不能将它保存为变量，以便以后能够传递它

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;

import React，{Component}来自'React'；
类SearchField扩展组件{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleChange=（事件）=>{
this.setState（{value:event.target.value}）；
}
handleSubmit=（事件）=>{
event.preventDefault（）；
取回(`https://itunes.apple.com/search?media=music&term=${this.state.value.toLowerCase（）}`）
.然后（（resp）=>resp.json（））
.then（searchRes=>searchRes.results[0].artistName）
.catch（err=>console.log（err））；
}
render（）{
返回(
)
}
}
导出默认搜索字段；

我以后必须使用提取的数据，我只需要艺术家的名字。 如果我记录了值（searchRes.results[0].artistName），我会得到正确的值，但是如果我想保存它供以后使用，我只会得到空的console.log back。 我尝试了好几种方法，但都没有得到结果

---

请帮帮我。

请具体说明你的意思

但是如果我想保存它以备以后使用，我只得到了空的console.log

我认为处理问题的正确方法是将回调函数传递给组件的道具，每当您按下search键并找到搜索结果时，就会调用该函数，如下所示：

---

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

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

下面是一个基于现有代码的快速模型：

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

类搜索扩展{
建造师（道具）{
超级（道具）；
this.state={url:'}；
this.handleKey=this.handleKey.bind（this）；
}
手钥匙（e）{
const url=e.target.value；
this.setState（{url}）；
}
render（）{
const{url}=this.state；
//获取从应用程序传递的函数
const{fetchData}=this.props；
返回(
//单击按钮时使用url调用该函数
fetchData（url）}>单击
)
}
}
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={data:[]}；
this.fetchData=this.fetchData.bind（this）；
}
//应用程序包含fetch方法
获取数据（url）{
获取（url）
.then（res=>res.json（））
//使用新数据更新应用程序状态
.then（data=>this.setState（{data}）；
}
render（）{
const{data}=this.state；
//健全性检查-如果状态中仍然没有数据，则显示
//加载图标之类的
如果（！data.length）返回
//否则返回其余的应用程序组件
//将fetch方法作为搜索组件的道具传入
返回(
)
}
}

什么是“无法保存”？我想将其保存在一个变量中，如let artist=searchRes.results[0].artistName；但如果我这样做，它只会给我一个空白日志，而不是获取的名称。感谢您的沙盒版本帮助了我很多！但我又有一个问题！我的全部任务是获取结果，将其缩小到艺术家，然后如果您单击艺术家，它会显示他们所有的专辑名称和封面。如果我不缩小结果，我会出现一个错误，说：“对象作为React子对象无效”，因为我得到了一个Obj。我如何才能像在上一个案例中那样将此Obj作为数据传递。我必须像这样将Obj作为数据传递吗？this.setState（{data:resultObj}）再次感谢！您出现此错误是因为您尝试执行以下操作：返回{anObjectInYourState}，这不起作用，因为您将对象用作react子组件。我的示例可以通过调用JSON.stringify（anObjectInYourState）并将生成的字符串用作react子组件来修复。很抱歉，我不能更具体。