第8行：解析錯誤：這是保留字

Question

我正在嘗試制作有關API中每個項目的詳細頁面； 但是它似乎不起作用，它給我一個“第8行：解析錯誤：這是一個保留字”錯誤。 另外，我不確定我的代碼在DetailPage.js中是否正常運行，我想獲取詳細信息頁面主頁上單擊的項目的數據，因此我檢查ID是否與API中的任何ID匹配。

我的App.js

import React, { Component } from 'react';
import { BrowserRouter,Route,Switch } from 'react-router-dom';
import Brewery from './components/Brewery'
import DetailPage from './components/DetailPage'
import Menu from './components/Menu'

class App extends Component {
  render() {
    return (
      <div>
      <div> <Menu /> </div>
      <div>
        <BrowserRouter>
          <Switch>
            <Route path="/brewery" component={Brewery} exact/>
            <Route path="/brewery/:id" component={DetailPage} exact/>
          </Switch>
        </BrowserRouter>
      </div>
      </div>
    )
  }
}

export default App;

我的Brewery.js

import React from "react";
import { Link } from 'react-router-dom';

class Brewery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breweries: []
    };
    }

  componentDidMount() {
    fetch("https://api.openbrewerydb.org/breweries")
      .then(response => response.json())
      .then((data) => {
        this.setState({
          breweries: data,
        })
      })
  }

  render() {

    const { breweries } = this.state;

    return(
        <ul>
          {breweries.slice(0,10).map((brewery) =>
              <li key={brewery.id}>
                <Link to={`/brewery/${ brewery.id }`}>
                  {brewery.name}
                </Link>
              </li>
          )}
        </ul>
    )
  }
}

export default Brewery;

我的DetailPage.js

import React from "react";
import Brewery from './Brewery'

class DetailPage extends React.Component {
  render() {
    const paramsId = `${this.props.match.params.id}`
    return(
        {this.state.breweries.map((brewery) => {
          if (brewery.id === paramsId) {
            return <div>{brewery.name}</div>
        }})
    )
  }
}
}

export default DetailPage;

Answer 1

正如@SLaks在注釋中指出的那樣，在JSX中使用Javascript表達式時，您不需要curl（ {} ）。 只需直接編寫您的表達式即可。

render() {
  // You don't need to use curlies here.
  console.log("foo");
  return (
    // or here if you start your return statement with a Javascript expression.
    foo.map(el => <div>{Here you need it if it is a JS expression}</div>)
  );
}

因此，將頂部的小DetailPage組件的返回部分中。 但是之后，您將遇到另一個與當前問題無關的問題。 在您的DetailPage您沒有任何breweries狀態。 您正在Brewery組件中獲取它們。 因此，您在DetailPage組件中沒有它們。 您有一個來自路由器的ID，因此，作為一種幼稚的方法，您可以再次使用它來獲取單個啤酒廠。

所以：

class DetailPage extends React.Component {
  state = {
    brewery: {}
  };

  componentDidMount() {
    const { id } = this.props.match.params;
    fetch(`https://api.openbrewerydb.org/breweries/${id}`)
      .then(response => response.json())
      .then(data => {
        this.setState({
          brewery: data
        });
      });
  }
  render() {
    return <p>{this.state.brewery.name}</p>;
  }
}