javascript - 第 8 行 : Parsing error: this is a reserved word

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;

我的啤酒厂.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 表达式时，不需要花括号 ({})。直接写下你的表达式即可。

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>;
  }
}