1

我是 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.
4

2 回答 2

5

您的反应组件是一个功能组件。您不需要函数组件内的 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;
于 2019-08-14T07:42:33.323 回答
1

你的代码中有很多问题，

  1. 您已经组合了类组件和功能组件。
  2. set是保留字，请勿将变量与 name 一起使用set。
  3. toLowercase()是错字，应该是toLowerCase()。
  4. 我们无权访问this功能组件。
  5. 您的搜索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;

演示

于 2019-08-14T09:19:08.927 回答