时间戳

首页 > 解决方案 > TypeError：从类重构为函数组件后，Object(...) 不是函数

javascript - TypeError：从类重构为函数组件后，Object(...) 不是函数

问题描述

我刚刚将一个遗留的 React 16.6.3 应用程序从一个基于类的SearchBar组件重构为一个函数组件，如下所示：

import React, { useState } from 'react';

const SearchBar = ({ onFormSubmit }) => {
  const [term, setTerm] = useState('');

  const onSubmit = (event) => {
    event.preventDefault();

    onFormSubmit(term);
  };

  return (
    <div className="search-bar ui segment">
      <form onSubmit={onSubmit} className="ui form">
        <div className="field">
          <label>Video Search</label>
          <input
            type="text"
            value={term}
            onChange={(event) => setTerm(event.target.value)}
          />
        </div>
      </form>
    </div>
  );
};

export default SearchBar;

我没有看到我的代码有任何问题，即使我尚未将App组件从类重构为函数组件，它也应该按预期工作。我正在导入SearchBar类似的东西：

import React from "react";
import SearchBar from "./SearchBar";
import youtube from "../apis/youtube";
import VideoList from "./VideoList";
import VideoDetail from "./VideoDetail";

class App extends React.Component {
  state = { videos: [], selectedVideo: null };

  componentDidMount() {
    this.onTermSubmit("JavaScript");
  }

这里给出了什么，我无法检测到我在哪里犯了错误。这是确切的错误：

TypeError: Object(...) is not a function
SearchBar
src/components/SearchBar.js:3
  1 | import React, { useState } from 'react';
  2 | 
> 3 | const SearchBar = ({ onFormSubmit }) => {
  4 |   const [term, setTerm] = useState('');
  5 | 
  6 |   const onSubmit = (event) => {
View compiled
▶ 22 stack frames were collapsed.
Module../src/index.js
src/index.js:5
  2 | import ReactDOM from 'react-dom';
  3 | import App from './components/App';
  4 | 
> 5 | ReactDOM.render(<App />, document.querySelector('#root'));
  6 | 
View compiled

标签： javascriptreactjs

解决方案

根据@Daniels 的评论，这是因为 React 是 16.6.3 版本，这是在支持钩子之前。升级react到react-domv16.11.0 解决了这个问题

推荐阅读