我遇到一个持续存在的语法错误，无法解决一个多小时，它说无法编译意外的令牌57：1 Return（
我仍然是菜鸟，所以很抱歉，如果我问一个愚蠢的问题，但我似乎无法弄清楚这个问题。任何帮助都非常感谢，谢谢！！！
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Car from './car';
import { CarsRef, timeRef } from '../admin/reference';
import { Table, Row, Col } from 'reactstrap';
import Icon from 'react-icons-kit';
import { bin } from 'react-icons-kit/icomoon';
import { Link } from 'react-router-dom';
class CarsList extends Component {
state = {
Cars: [],
Carsloading: true
};
componentWillMount() {
CarsRef.on('value', snap => {
const tasks = [];
let Cars = []
snap.forEach(shot => {
Cars.push({ ...shot.val(), key: shot.key });
});
console.log(Cars);
this.setState({ Cars: Cars, CarsLoading: false });
});
}
render(){
const { Cars, CarsLoading } = this.state;
const orderedcars = Cars;
let carList;
if (CarsLoading) {
carList = <div className="TaskList-empty">Loading...</div>;
}
else if (Cars.length) {
carList = (
<ul className="TaskList">
{Cars.map(car => (
return (
<div>
<Row>
<Col md="12">
<div className="card border-secondary mb-3">
<div className="card-header text-success">
<h4>
<Link to={`/cars/${car.id}`}>
{car.year} {car.make} {car.model} {car.trim}
</Link>
</h4>
</div>
<div className="card-body">
<Row>
<Col md="5">
<CardImg className="carlist-margin" top width="100%" src={car.link} alt={car.make} />
</Col>
<Col md="4">
<Table className="striped">
<tbody>
<tr>
<td>Engine:</td>
<td>{car.engine}</td>
</tr>
<tr>
<td>Drive Type:</td>
<td>{car.drive_type}</td>
</tr>
<tr>
<td>Body:</td>
<td>{car.body_type}</td>
</tr>
<tr>
<td>Exterior Color:</td>
<td>{car.ext_color}</td>
</tr>
<tr>
<td>Interior Color:</td>
<td>{car.int_color}</td>
</tr>
<tr>
<td>Transmission:</td>
<td>{car.transmission}</td>
</tr>
<tr>
<td>VIN:</td>
<td>{car.vin}</td>
</tr>
</tbody>
</Table>
</Col>
<Col md="3">
<Table className="striped">
<tbody>
<tr>
<td className="text-primary text-right">
<strong>
MSRP:
</strong>
</td>
<td className="text-primary text-right">
<strong>
${car.price}
</strong>
</td>
</tr>
<tr>
<td className="text-danger text-right">Dealer Discount:</td>
<td className="text-danger text-right">{car.sale}%</td>
</tr>
<tr>
<td className="text-primary text-right">
<strong>
Total:
</strong>
</td>
<td className="text-primary text-right">
<strong>
${car.price-car.price*car.sale/100}
</strong>
</td>
</tr>
<tr>
<td className="text-primary text-right">Est. Lease:</td>
<td className="text-primary text-right">$230/m*</td>
</tr>
<tr>
<td className="text-primary text-right">Est. Finance:</td>
<td className="text-primary text-right">$330/m*</td>
</tr>
<tr>
<td className="text-right"></td>
<td className="text-right">
<Link to={`/cars/${car.id}`}>
<Button className="btn btn-success">More</Button>
</Link>
</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
</div>
</div>
</Col>
</Row>
</div>
</div>
))}
);
};
}
导出默认汽车；
答案 0 :(得分：1)
您有一个箭头函数car => ( ... )，但没有函数体{}，因此不需要return语句，因为JSX将隐式返回。
还要确保您从carList方法返回了render，否则该组件将没有任何呈现。
class CarsList extends Component {
// ...
render() {
const { Cars, CarsLoading } = this.state;
const orderedcars = Cars;
let carList;
if (CarsLoading) {
carList = <div className="TaskList-empty">Loading...</div>;
} else {
carList = (
<ul className="TaskList">
{Cars.map(car => (
<div>
<Row>
<Col md="12">
<div className="card border-secondary mb-3">
<div className="card-header text-success">
<h4>
<Link to={`/cars/${car.id}`}>
{car.year} {car.make} {car.model} {car.trim}
</Link>
</h4>
</div>
<div className="card-body">
<Row>
<Col md="5">
<CardImg
className="carlist-margin"
top
width="100%"
src={car.link}
alt={car.make}
/>
</Col>
<Col md="4">
<Table className="striped">
<tbody>
<tr>
<td>Engine:</td>
<td>{car.engine}</td>
</tr>
<tr>
<td>Drive Type:</td>
<td>{car.drive_type}</td>
</tr>
<tr>
<td>Body:</td>
<td>{car.body_type}</td>
</tr>
<tr>
<td>Exterior Color:</td>
<td>{car.ext_color}</td>
</tr>
<tr>
<td>Interior Color:</td>
<td>{car.int_color}</td>
</tr>
<tr>
<td>Transmission:</td>
<td>{car.transmission}</td>
</tr>
<tr>
<td>VIN:</td>
<td>{car.vin}</td>
</tr>
</tbody>
</Table>
</Col>
<Col md="3">
<Table className="striped">
<tbody>
<tr>
<td className="text-primary text-right">
<strong>MSRP:</strong>
</td>
<td className="text-primary text-right">
<strong>${car.price}</strong>
</td>
</tr>
<tr>
<td className="text-danger text-right">
Dealer Discount:
</td>
<td className="text-danger text-right">
{car.sale}%
</td>
</tr>
<tr>
<td className="text-primary text-right">
<strong>Total:</strong>
</td>
<td className="text-primary text-right">
<strong>
${car.price - (car.price * car.sale) / 100}
</strong>
</td>
</tr>
<tr>
<td className="text-primary text-right">
Est. Lease:
</td>
<td className="text-primary text-right">
$230/m*
</td>
</tr>
<tr>
<td className="text-primary text-right">
Est. Finance:
</td>
<td className="text-primary text-right">
$330/m*
</td>
</tr>
<tr>
<td className="text-right" />
<td className="text-right">
<Link to={`/cars/${car.id}`}>
<Button className="btn btn-success">
More
</Button>
</Link>
</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
</div>
</div>
</Col>
</Row>
</div>
))}
</ul>
);
}
return carList;
}
}