渲染的反应格式——语法——意外标记答案

【问题标题】：React formatting for render -- syntax -- unexpected token渲染的反应格式——语法——意外标记
【发布时间】：2020-09-11 06:00:14
【问题描述】：

我想知道为什么我的 React 类的格式是错误的？它说应该有一个括号，但我确实包括了一个括号？不过，我可能会忘记语法格式的某些方面:( 这是我的 js 文件中的一个 sn-p：

function App() {
  state = {
    posts = []; 
    input = '';
  };
  componentDidMount = () => {
    this.getPosts();
  };
  getPosts = () => {
    axios.get('(server)')
    // replace (server) with server link
      .then((response) => {
        const data = response.data;
        this.setState({ posts: data });
      })
  }
  displayBlogPost = (posts) => {
    if (!posts.length) return null;
    return posts.map((post, index) => (
      <div key={index} className="post__display">
        <h3>"name " + post.name </h3>
        <h3>"City " + post.location </h3>
        <h3>"Requesting " + post.type </h3>
        <h3> post.message </h3> 
      </div>
    ));
  };

  render() {
      return (
        <div className="App">
        <header> 
            <h2> Covunity </h2> 
            <SearchExample items= { this.state.posts } />
        </header>
            </div>
        <div className="gallery"> 
        {this.displayBlogPost(this.state.posts)} </div> 
    )
    document.getElementById('root')
  }
}

错误信息是

Syntax error: Unexpected token, expected ";" (54:12)

（在渲染（）处）

【问题讨论】：

标签： reactjs error-handling syntax frontend

【解决方案1】：

首先，您必须返回单个元素。相反，您返回 2。然后，渲染方法实现中的最后一行是无法访问的（在返回之后）。试试这个：

render() {
  return (
    <div>
      <div className="App">
        <header>
          <h2> Covunity </h2>
          <SearchExample items={this.state.posts}/>
        </header>
      </div>
      <div className="gallery">
        {this.displayBlogPost(this.state.posts)}
      </div>
    </div>
  )
  // document.getElementById('root')
}

【讨论】：

好的，刚刚试过，但我仍然在该行收到错误 - 同样的错误
als，我们不需要 getElementById
@ManaalSiddiqui，您需要在组件的 render() 方法中的 ReactDOM.render() not 中使用它。