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

您的react组件是一个功能组件。您不需要功能组件内部的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;

Answer 2

您的代码中有很多问题，

您已将类组件和功能组件结合在一起。
set是保留字，请勿使用名称为set的变量。
toLowercase()是一个错字，应该是toLowerCase()。
我们无权访问功能组件中的this。
您的搜索input应该是controlled。

所以您的最终代码应如下所示，

import React, {useState,useEffect} from 'react'; 

const About = () => {
    const [item, setItems] = useState([]);
    const [search, setSearch] = useState("");

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

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

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

    return ( 
      <div className="items">
        <div className="col">
          <input label="search" icon="search" onChange={onchange} value={search}/> 
        </div>
        {search !=="" ? 
          item.filter(item => item.Description.toLowerCase().includes(search.toLowerCase())).map(item => ( <p key={item.SNo}>{item.Description}</p>)) 
          :
          item.map(item => (<p key={item.SNo}>{item.Description}</p>))
        } 
      </div>  
    );
}

export default About;

Demo

React JS：解析错误：意外的令牌，预期为“;”

2 个答案: