Странная ошибка, возникающая при попытке реализовать useEffect - PullRequest
Новая
       1

Странная ошибка, возникающая при попытке реализовать useEffect

6 голосов
/ 26 апреля 2019

Я пытаюсь использовать useEffect внутри моей функции кабины, которая возвращает пару элементов, но я получаю эту странную ошибку, говорящую, что «Строка 6: React Hook« useEffect »вызывается в функции« кокпит », которая не является ни компонентом функции React, ни пользовательской функцией React Hook-реакт-крючки / правила-ловушки».

Но наверняка мой компонент кабины - это функция? 

import React, { useEffect } from 'react'

import classes from './Cockpit.css'

const cockpit = (props) => {
  useEffect(() => {
    console.log('I work!')
  })

  const assignedClasses = []
  let btnClass = ''
  if (props.showPersons) {
    btnClass = classes.Red;
  }

  if (props.persons.length <= 2) {
    assignedClasses.push(classes.red)
  }
  if (props.persons.length <= 1) {
    assignedClasses.push(classes.bold)
  }

  return (
    <div className={classes.Cockpit}>
      <h1>{props.title}</h1>
      <p className={assignedClasses.join(' ')}>HELLO, HELLO!</p>
      <button
        className={btnClass}
        onClick={props.clicked}>Click me!</button>
    </div>
  )
}


export default cockpit

Ответы [ 2 ]

11 голосов
/ 26 апреля 2019

Только для справки, имя компонента должно начинаться с заглавной буквы

1 голос
/ 23 июля 2019 
//This is the exact solution

import React, { useEffect } from 'react';

import classes from './Cockpit.css';

const Cockpit = props => {
  useEffect(() => {
    console.log('[Cockpit.js] useEffect');
    // Http request...
    setTimeout(() => {
      alert('Saved data to cloud!');
    }, 1000);
    return () => {
      console.log('[Cockpit.js] cleanup work in useEffect');
    };
  }, []);

  useEffect(() => {
    console.log('[Cockpit.js] 2nd useEffect');
    return () => {
      console.log('[Cockpit.js] cleanup work in 2nd useEffect');
    };
  });

  // useEffect();

  const assignedClasses = [];
  let btnClass = '';
  if (props.showPersons) {
    btnClass = classes.Red;
  }

  if (props.persons.length <= 2) {
    assignedClasses.push(classes.red); // classes = ['red']
  }
  if (props.persons.length <= 1) {
    assignedClasses.push(classes.bold); // classes = ['red', 'bold']
  }

  return (
    <div className={classes.Cockpit}>
      <h1>{props.title}</h1>
      <p className={assignedClasses.join(' ')}>This is really working!</p>
      <button className={btnClass} onClick={props.clicked}>
        Toggle Persons
      </button>
    </div>
  );
};

export default Cockpit;

// Look out for the identifier names of the const and the export
...