Блог

Я только что реорганизовал устаревшее приложение 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
 

Согласно комментарию @Daniels, это было связано с тем, что React был версии 16.6.3, которая была до того, как были поддержаны перехваты. Обновление react и react-dom до версии 16.11.0 устранило проблему