Блог

Главная - Вопросы по программированию - Невозможно использовать перехват реакции внутри функции

Невозможно использовать перехват реакции внутри функции

#reactjs #react-hooks

#reactjs #реагирующие перехваты

Вопрос:

Я пытаюсь использовать перехват реакции useEffect внутри функции с именем EditForm.

Он продолжает говорить мне:

 Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Но я использую его внутри функции с именем EditForm .

Поэтому я не уверен, почему он думает, что его нет в функции.

Есть ли способ заставить это работать?

Вот мой код:

 const EditForm = ({
idVal, titleVal, sectionVal, factoryId, departmentId, countryId, dictionName, showMeVal }) => (

const [pcData, setPcData] = useState([]);

useEffect(() => {
    const fetchData = async () => {
        const result = await axios(
            'api/manufacturingData',
        );
        setPcData(result.data.sort((a, b) => a.name.localeCompare(b.name)));
    };
    fetchData();
}, []);
    <div className="app">

        <Formik
            initialValues={{
                id: idVal,
                title: titleVal
        ....etc />

Комментарии:

1. Я думаю, что сам ваш компонент в порядке — вероятно, именно там вы используете компонент. Можете ли вы показать эту часть?

2. Это может быть ошибкой при расшифровке вашего кода, но у вас есть открытая скобка, а не открытая скобка?

3. спасибо, где? Кажется, я ничего не могу найти

4. вместо этого ваш вставленный код функции объявляется как ({ stuff }) => () , ({ stuff }) => { // doStuff; return <div>content</div> } . первый действителен только в том случае, если содержимое является выражением, которое разрешается в некотором jsx, например ({ stuff }) => (<div>content</div>) , или ({ stuff }) => (stuff amp;amp; <div>content</div>)

Ответ №1:

Попробуйте поместить свой код следующим образом:

 import React, { useState, useEffect } from "react";
import axios from "axios";

const EditForm = ({
  idVal,
  titleVal,
  sectionVal,
  factoryId,
  departmentId,
  countryId,
  dictionName,
  showMeVal,
}) => {
  
  const [pcData, setPcData] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios("api/manufacturingData");
      setPcData(result.data.sort((a, b) => a.name.localeCompare(b.name)));
    };
    fetchData();
  }, []);
  return <div>Your content</div>;
};

export default EditForm;
Метки: