Question

enter image description here我正在构建此搜索组件，用于搜索将图书与特定关键字用户类型进行比较的图书。我已经创建了此搜索功能，它的工作原理如下：

import React from 'react'

function Search() {
  return (
    <div>
      {console.log("Hello World")}
    </div>
  )
}

export default Search

但是，当我向代码中添加功能时，它会中断说TypeError：对象不是函数。这是中断的代码：

import React, { useState, useEffect } from "react";
import * as BooksAPI from "../BooksAPI";
import Spinner from "./Spinner";
import SearchResults from "./SearchResults";

function Search() {
  const [showSearchPage, setShowSearchPage] = useState(false);
  const [searchItem, setSearchItem] = useState("");
  const [data, setData] = useState({});

  useEffect(
    async () => {
      const booksData = await BooksAPI.search(searchItem);
      setData({ data: booksData });
    },
    [searchItem]
  );
  return (
    <div className="search-books">
      <div className="search-books-bar">
        <button
          className="close-search"
          onClick={() => setShowSearchPage({ showSearchPage: false })}
        >
          Close
        </button>
        <div className="search-books-input-wrapper">
          <input
            type="text"
            placeholder="Search by title or author"
            value={searchItem}
            onChange={(e) => {
              setSearchItem({ searchItem: e.target.value });
            }}
          />
        </div>
      </div>
      <div className="search-books-results">
        <ol className="books-grid">
          {data.length !== undefined ? (
            <div className="search">
              <SearchResults data={data} />
              {console.log(data)}
            </div>
          ) : (
            <Spinner />
          )}
          <li />
        </ol>
      </div>
    </div>
  );
}

export default Search;

Answer 1

您需要更改setState方法。您正在使用useState。您不需要使用以前的setState方法。

希望这对您有所帮助。

import { useEffect, useState } from "react";
import * as BooksAPI from "../BooksAPI";
import Spinner from "./Spinner";
import SearchResults from "./SearchResults";

const Search = () => {
  const [showSearchPage, setShowSearchPage] = useState(false);
  const [searchItem, setSearchItem] = useState("");
  const [data, setData] = useState({});

  useEffect(() => {
    handleGetData()
  }, [searchItem])
  
    const handleGetData = () => {
    BooksAPI.search(searchItem).then(result => {
        setData(result);
    });
}
  return (
    <div className="search-books">
      <div className="search-books-bar">
        <button
          className="close-search"
          onClick={() => setShowSearchPage(false)}
        >
          Close
        </button>
        <div className="search-books-input-wrapper">
          <input
            type="text"
            placeholder="Search by title or author"
            value={searchItem}
            onChange={(e) => {
              setSearchItem(e.target.value);
            }}
          />
        </div>
      </div>
      <div className="search-books-results">
        <ol className="books-grid">
          {data && data.length !== undefined ? (
            <div className="search">
              <SearchResults data={data} />
              {console.log(data)}
            </div>
          ) : (
            <Spinner />
          )}
          <li />
        </ol>
      </div>
    </div>
  );
}

export default Search;

Answer 2

谢谢大家的帮助。我自己解决了这个问题。问题实际上与我使用的16.6不支持钩子的react版本有关，当我使用钩子时，它给出了错误。我删除了我的node modules文件夹，将我的react版本更改为package.json中的最新版本，运行npm install并解决了问题。这是现在的代码。

import React, { useState, useEffect } from "react";
import * as BooksAPI from "../BooksAPI";
import Spinner from "./Spinner";
import SearchResults from "./SearchResults";

function Search() {
  const [showSearchPage, setShowSearchPage] = useState(false);
  const [searchItem, setSearchItem] = useState("art");
  const [data, setData] = useState({});

  useEffect(
    () => {
      const func = async () => {
        const result = await BooksAPI.search(searchItem);

        console.log(result);
        setData(result);
      };
      func();
    },
    [searchItem]
  );
  return (
    <div className="search-books">
      <div className="search-books-bar">
        <button
          className="close-search"
          onClick={() => setShowSearchPage(true)}
        >
          Close
        </button>
        <div className="search-books-input-wrapper">
          <form>
            <input
              type="text"
              placeholder="Search by title or author"
              value={searchItem}
              onChange={(e) => {
                setSearchItem(e.target.value);
              }}
            />
          </form>
        </div>
      </div>
      <div className="search-books-results">
        {data ? (
          <div className="search">
            <ol className="books-grid">
              <SearchResults data={data} />
            </ol>
            {console.log(data)}
          </div>
        ) : (
          <Spinner />
        )}
      </div>
    </div>
  );
}

export default Search;

ReactJS错误TypeError：Object（...）不是一个函数

2 个答案: