问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

反应的返回语句中的foreach循环

社区维基
1
新手上路，请多包涵

我已经通过 API 获取了一些信息，现在我正在尝试显示从中获取的信息。我获取的信息包括 books_authors 、 books_id’s 、 price 和数据集非常大，我无法通过我的以下方法显示这些信息……有人可以帮助我……我是新来的反应

到目前为止，这是我尝试过的：

 import React from "react";
import Head from './head';

function App(){

  let s;
  const proxy = 'http://cors-anywhere.herokuapp.com/';
  const api = `${proxy}http://starlord.hackerearth.com/books`;
  fetch(api)
  .then(response =>{
    return response.json();
  })
  .then(data =>{
    console.log(data);
    data.forEach((index) => {
       s=index;
      <Head s/>
    });
  });
  return(
    <Head />
  );
}

export default App;

//the head component

import React from "react";

function Head(props){

    return(
        <div className="app">
            <div className="heading">
                <h1>BOOK_CAVE</h1>
                <div className="heading_description">So many books...so
little time...</div>
            </div>
            <div className="author">{props.authors}</div>
            <div className="id">{props.bookID}</div>
            <div className="price">{props.price}</div>
        </div>
    );
}

export default Head;

原文由 harsh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptreactjsforeach
阅读 287
2 个回答
得票最新
社区维基
1
✓ 已被采纳

You can do this using Hooks , useState to store data and useEffect to call API ,

 import React, {useState,useEffect} from "react";
import Head from './head';

function App(){
  const [data, setData] = useState([])

  useEffect(() => {
      const proxy = 'http://cors-anywhere.herokuapp.com/';
      const api = `${proxy}http://starlord.hackerearth.com/books`;
      fetch(api).then(response => {
        setData(response.json())
      })
    },[])

  return(
    <div>
      {data.length>0 && data.map(book => <Head book={book} />)
    </div>
  );
}

你的 Head 组件应该是，

 function Head(props){

    return(
        <div className="app">
            <div className="heading">
                <h1>BOOK_CAVE</h1>
                <div className="heading_description">So many books...so
little time...</div>
            </div>
            <div className="author">{props.book.authors}</div>
            <div className="id">{props.book.bookID}</div>
            <div className="price">{props.book.price}</div>
        </div>
    );
}

原文由 ravibagul91 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

您从 API 获取的书籍数组应该存储在一个状态中，您应该根据该状态呈现应用程序。数据获取应该在组件安装时发生，因此您调用 componentDidMount 生命周期方法，并在数据完成获取时更新状态。此外，Head 组件收到三个道具，但你只传递一个。

 class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        books: [],
        fetching: true,
    }

    componentDidMount() {
      const proxy = 'http://cors-anywhere.herokuapp.com/';
      const api = `${proxy}http://starlord.hackerearth.com/books`;
      fetch(api)
        .then(response => response.json() )
        .then(data => this.setState({books: data, fetching: false,}) );
    }

    render() {
      if (this.state.fetching) {
        return <div>Loading...</div>
      }

      const headArray = this.state.books.map(book => (
        <Head
            authors={book.authors}
            bookID={book.bookID}
            price={book.price}
        />
      ));

      return(
        <div>
          {headArray}
        </div>
      );
    }
}

原文由 Laurentiu Turcu 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题