时间戳

首页 > 解决方案 > 解析错误：功能组件中出现意外的令牌反应

reactjs - 解析错误：功能组件中出现意外的令牌反应

问题描述

我正在学习 React 并在功能组件中显示来自 props 的值时遇到错误。我知道语法错误，但不知道如何解决。当将相同的功能组件编写为类组件时，它工作正常。但在功能组件中，它给出了语法错误。代码：

应用程序.js：

import React, { Component } from 'react';
import './App.css';
import Crypto from './Component/Crypto';
class App extends Component {
  constructor(){
    super();
    this.state={
        data: [
            {
                name:'Bitcoin',
                id:1,
                value:'2000'
            },
            {
                name:'Ripple',
                id:2,
                value:'60'
            },
            {
                name:'Etherium',
                id:3,
                value:'250'
            }
        ]
    }
}
  render() {
    return (
      <div className="App">
        <Crypto data={this.state.data}/>
      </div>
    );
  }
}


export default App;

Crypto.js

import React from 'react';

const Crypto=(props)=> {

    return (
        <div className="App">
      {const showData=props.data.map((info)=>
          return (
            <div key={info.id}>
            <h3>{info.name}</h3>
            <h2>${info.value}</h2>
            </div>
          )
      )}
        {showData}
      </div>
    );
  }


export default Crypto;

错误： {const showData=props.data.map((info)=>

标签： reactjsecmascript-6

解决方案

return (
        <div className="App">
      {const showData=props.data.map((info)=> //<==== remove const showData
          return (
            <div key={info.id}>
            <h3>{info.name}</h3>
            <h2>${info.value}</h2>
            </div>
          )
      )}
        {showData}                      //<==== remove {showData}
      </div>
    );

return (
        <div className="App">
      {props.data.map((info)=>
          return (
            <div key={info.id}>
            <h3>{info.name}</h3>
            <h2>${info.value}</h2>
            </div>
          )
      )}
      </div>
    );

我注意到的问题是您在return语句中声明了变量。您应该改为删除它showData并仅使用map函数来返回所需的输出

推荐阅读