时间戳

首页 > 解决方案 > react的return语句中的foreach循环

javascript - react的return语句中的foreach循环

问题描述

我已经从 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;

标签： javascriptreactjsforeach

解决方案

您可以使用Hooks,useState来存储数据并useEffect调用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>
    );
}

推荐阅读