React JS：解析错误：意外标记，预期“；”

Question

我是 ReactJS 的新手。这是我的第一个 React 程序。实际上，这是一个动态页面，我正在使用运行良好的 API，但我想动态搜索。我尝试了一些教程，但它显示了一些错误。请解决问题。我的代码如下：

import React, {useState,useEffect} from 'react'; 
import './App.css'; 

function About() {

    state ={
      search : ""
    }

    useEffect(() => {
      fetchItems();
    }, []);

    const [set, setItems] = useState([]);

    const fetchItems = async () => {
    const data = await fetch(
      'http://www.ongccreditsociety.com/api/circular.php'
      );

    const set = await data.json();
    console.log(set); 
    setItems(set);
    };

    onchange = e => {
      this.setState({ search : e.target.value});
    }

    render(){ 
      const {search} = this.state;
      const filter =  set.filter( country =>{
        return country.Description.toLowercase().indexOf(search.toLowercase() ) != -1
      })

    return ( 
      <div className="items">
        <div className="col">
          <input label="search" icon="search" onChange={this.onchange} /> 
        </div>
        {filter.map(item => (
          <p>{item.Description}</p> 
        ))} 
      </div>  
    );
  }
}

export default About;

错误是：

      Failed to compile
      ./src/about.js
      Line 30:  Parsing error: Unexpected token, expected ";"

      28 |       }
      29 | 
      30 |       render(){ 
         |               ^
      31 |         const {search} = this.state;
      32 |         const filter =  set.filter( country =>{
      33 |           return country.Description.toLowercase().indexOf(search.toLowercase() ) != -1
    This error occurred during the build time and cannot be dismissed.

Answer 1

你的反应组件是一个功能组件。您不需要函数组件内的 render 方法。该函数本身就是渲染函数。

这将工作

import React, { useState, useEffect } from "react";
import "./App.css";

function About() {
  useEffect(() => {
    fetchItems();
  }, []);

  const [set, setItems] = useState([]);
  const [search, setSearch] = useState("");

  const fetchItems = async () => {
    const data = await fetch(
      "http://www.ongccreditsociety.com/api/circular.php"
    );

    const set = await data.json();
    console.log(set);
    setItems(set);
  };

  const onchange = e => {
    setSearch(e.target.value);
  };

  const filter = set.filter(country => {
    return (
      country.Description.toLowercase().indexOf(search.toLowercase()) != -1
    );
  });

  return (
    <div className="items">
      <div className="col">
        <input label="search" icon="search" onChange={onchange} />
      </div>
      {filter.map(item => (
        <p>{item.Description}</p>
      ))}
    </div>
  );
}

export default About;