在reactjs中使用fetch api和map显示JSON数据[重复]答案

【问题标题】：Showing JSON Data using fetch api and map in reactjs [duplicate]在reactjs中使用fetch api和map显示JSON数据[重复]
【发布时间】：2018-09-19 15:36:09
【问题描述】：

我一直在尝试使用 fetch api 来显示 json 并使用 map 来迭代数据，但我一直在显示 json 并在 reactjs 中对其进行迭代

这是文件

App.js

import React, { Component } from 'react';

import './App.css';

class App extends Component {

  constructor(props) {
    super();

    this.state = {
      productlist:  [],
      error: null,
    }
  }

  componentDidMount(){
    
      fetch(`http://texpertise.in/data.php`)
    .then(result => result.json())
    .then(productlist => this.setState({productlist: productlist.value}))
    }

  render() {
     return (
            <div> 
                {this.state.productlist.map(product => 
                       <div> {product.name} </div>
                       <div> {product.description} </div> 
                       <div> {product.image} </div>
                       <div> {product.nonVeg} </div>
                       <div> {product.spicy} </div>
                       )}
            </div>
        );
  }
 }
export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

我收到了这个错误

./src/App.js

Syntax error: reactspa/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag (42:23)

  40 |                 {this.state.productlist.map(product => 
  41 |                        <div> {product.name} </div>
> 42 |                        <div> {product.description} </div> 
     |                        ^
  43 |                        <div> {product.image} </div>
  44 |                        <div> {product.nonVeg} </div>
  45 |                        <div> {product.spicy} </div>

【问题讨论】：

从map方法中返回jsx。

标签： javascript reactjs

【解决方案1】：

使用 react 15.1 时，您的 .map 只能返回一个元素，在您的情况下，您正在返回

<div>{product.name}</div> <div>{product.description}</div>

它应该被包装并作为单个元素返回

<div><div>{product.name}</div> <div>{product.description}</div></div>

【讨论】：