Question

如何遍历数组中的多个属性以及如何使用map函数并将数组中的多个属性显示到网页

import React, { Component } from 'react';

import './App.css';

class App extends Component {
  constructor(){
    super();
    this.state={
      booksLists:'',
      description: ''
   }
 }
  componentWillMount() {
    fetch('https://reactnd-books-api.udacity.com/books', { headers: { 
   'Authorization': 'whatever-you-want' }})
    .then(res => res.json())
    .then(res => {
       this.setState({booksLists: res})
   })
  }

    render() {
    let booksLists = this.state.booksLists;
    console.log(booksLists)

    return (
      <div className="App">
         <h2>My Reads</h2>
         <p></p>
       </div>
      );
  }
}

导出默认App;

Answer 1

这是 CodePen Demo ，或者您可以运行以下代码段：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      booksLists: []
    };
  }
  componentWillMount() {
    fetch("https://reactnd-books-api.udacity.com/books", {
      headers: {
        Authorization: "whatever-you-want"
      }
    }).then(res => res.json()).then(res => {
      this.setState({booksLists: res.books});
    });
  }

  render() {
    const {booksLists} = this.state;
    const books = booksLists
      ? booksLists.map(book => <div className='panel panel-default col-xs-12'>
        <div className='panel-heading'>
          <h3>{book.title || 'not available'}</h3>
          <h5>{book.subtitle || 'not available'}</h5>
        </div>
        <div className='panel-body'>
          <div className='row'>
            <div className='col-xs-4'>
              <img className='img-responsive' src={book.imageLinks.smallThumbnail}/>
            </div>          
            <div className='col-xs-8'>
              <p>
                <strong>Authors: </strong>
                 {book.authors
                  ? book.authors.join(', ')
                  : 'not available'}</p>
              <p>
                <strong>Publisher: </strong>
                {book.publisher || 'not available'}</p>
              <p>
                <strong>Date of publication: </strong>
                {book.publishedDate || 'not available'}</p>
            </div>
          </div>
          <div className='row'>
            <div className='col-xs-12'>
              <p>{book.description || 'not available'}</p>
            </div>
          </div>
        </div>
      </div>)
      : null;

    return (
      <div className="App">
        <h2>My Reads</h2>
        {books}
      </div>
    );
  }
}

ReactDOM.render(
  <App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div id='root'></div>

Answer 2

如果您的图书清单是一个对象，您可以执行以下操作：

   render() {

     let list = booklist.arrayName.map(function(book) {
        return <li key={book}>{book}</li>;
      });     

    return (
      <div className="App">
         <h2>My Reads</h2>
         <ul>{ booksLists }</ul>
       </div>
      );
  }

首先，你应该在bookLists数组上map返回一个jsx元素，并将此映射数组赋值给一个新变量。通常，对于列表，这将是li元素。每个项目都需要一把钥匙。然后，您可以引用要在li元素中显示的值。

然后，您可以在render方法的return语句中引用新变量。

进行提取调用时出错

2 个答案: