reactjs - ReactJS - 使用 React Hooks 去抖动 - 引发我无法解决的错误。解析错误

Question

我正在使用这个：

https://dev.to/gabe_ragland/debouncing-with-react-hooks-jci

但是当我将它添加到我的 React 项目时，我遇到了这个问题：

第 4:20 行：导入模块“./BusNew”中的解析错误：JSX 属性只能分配一个非空表达式 (67:17) import/no-named-as-default

第 4:20 行：导入模块“./BusNew”中的解析错误：JSX 属性只能分配一个非空表达式 (67:17) import/no-named-as-default-member

这是我的代码：

import React, { Component, useState, useEffect } from 'react';
import useDebounce from './use-debounce';

export class BusNew extends Component {  

  return (

      <div>
        <input
          placeholder="Search Marvel Comics"
          onChange={e => setSearchTerm(e.target.value)}
        />
      </div>

      {isSearching && <div>Searching ...</div>}

      {results.map(result => (
        <div
          key={result.id
        >
          <h4>{result.title}</h4>


      ))}
    </div>

  );
}



function Search() {
  // State and setters for ...
  // Search term
  const [searchTerm, setSearchTerm] = useState('');
  // API search results
  const [results, setResults] = useState([]);
  // Searching status (whether there is pending API request)
  const [isSearching, setIsSearching] = useState(false);
  // Debounce search term so that it only gives us latest value ...
  // ... if searchTerm has not been updated within last 500ms
  // As a result the API call should only fire once user stops typing
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(
    () => {
      if (debouncedSearchTerm) {
        setIsSearching(true);
        searchCharacters(debouncedSearchTerm).then(results => {
          setIsSearching(false);
          // Filter out results with no thumbnail
          const filteredResults = results.data.results.filter(
            result => result.thumbnail.path.indexOf('image_not_available') === -1
          );
          setResults(filteredResults);
        });
      } else {
        setResults([]);
      }
    },
    [debouncedSearchTerm] // Only call effect if debounced search term changes
  );
  }



function searchCharacters(search) {
  const apiKey = 'f9dfb1e8d466d36c27850bedd2047687';
  return fetch(`https://gateway.marvel.com/v1/public/comics?apikey=${apiKey}&titleStartsWith=${search}`, {
    method: 'GET'
  }).then(r => r.json());
}



export default BusNew;

沙盒示例： https ://codesandbox.io/s/usedebounce-7byqd

感谢您的任何帮助！

标签： reactjsparsingdebounce