Question

反应灵的新手。这可能是一个重复的问题。实际上我需要从imdb文件中显示电影名称。我收到了来自IMDB文件的回复。但是无法显示电影名称。请看下面的代码

import React from 'react';

class App extends React.Component {
   constructor() {
      super();

      this.state = {
         items: 
         [

         ]
      }

   }
  componentDidMount() {
    this.UserList();
  }

  UserList() {

    fetch('https://theimdbapi.org/api/find/person?name=Kamal+Haasan')
    .then(items=>{
        const posts = items[0].filmography(obj => obj.soundtrack);
        console.log(posts)
        this.setState({ posts })
  }
}

   render() {
      return (
         <div>
            <div>
               {this.state.items.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}

export default App;

有人可以帮忙解决这个问题。我必须显示我需要从API调用中获取的电影名称。

提前致谢

Answer 1

您的fetch电话有问题。 fetch响应为readable stream，因此您必须使用适当的方法阅读。我在你的代码中做了一些修改。这是显示电影名称的完整工作代码。

import React from 'react';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      posts: []
    }

    this.UserList = this.UserList.bind(this);

  }
  componentDidMount() {
    this.UserList();
  }

  UserList() {

    fetch('https://theimdbapi.org/api/find/person?name=Kamal+Haasan').then(response => {
      return response.json();
    }).then(data => {
      const posts = data[0].filmography.soundtrack;
      this.setState({posts});
    });

  }

  render() {
    return (
      <div>
        <div>
          {
            this.state.posts.map((item, i) => {
              return <Content item={item} key={i}/>
            })
          }
        </div>
      </div>
    );
  }
}

class Content extends React.Component {
  render() {
    return (
      <div>
        <div>{this.props.item.title}</div>
      </div>
    );
  }
}

export default App;

如何使用reactjs从响应中获取数据格式的数据

1 个答案: