如何在 React 中重制和導出/導入 function？

Question

我需要在另一個組件中使用 useEffect（而不是在直接連接到 App.js 的組件中）。 如何重新制作並將其放入單獨的文件中？ 自定義掛鈎的自定義 function 會更好嗎？ 這是 App.js 組件：

import React, {useState, useEffect} from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import axios from 'axios';
import Competitions from './components/Competitions';
import CompetitionForm from './components/CompetitionForm';
import Navigation from './components/Navigation';
import './styles/App.css'
 
const App = () => {
  const [competitions, setCompetitions] = useState([]);
  const [defaultCompetitionValue, setDefaultCompetitionValue] = useState({})

  useEffect(() => {
    axios.get('http://localhost:4000/app/getCompetitions')
      .then(res => res.data)
      .then(res => {
        for(let i = 0; i < res.length; i++) {
          competitions[i] = {
            "value": res[i].name,
            "label": res[i].name,
            "id": res[i]._id
          }
        };
        setCompetitions(competitions);
      })
      .then(() => setDefaultCompetitionValue({"value": competitions[0].value, "label": competitions[0].value}))
  }, [competitions]);

  if(competitions.length > 0 && defaultCompetitionValue) {
    return (
      <div className = "container">
        <Router>
          <div className = "sidebar">
            <Navigation />
          </div>
          <div className = "content">
            <Switch>
              <Route exact path = "/homepage">
                <Competitions
                  competitions = {competitions}
                  defaultCompetitionValue = {defaultCompetitionValue}
                />
              </Route>
              <Route exact path = "/CompetitionForm">
                <CompetitionForm competitions = {competitions}/>
              </Route>
            </Switch>
          </div>
        </Router>
      </div>
    )
  }
  return (<></>)
};

export default App;

我需要在另一個組件中使用 useEffect（不直接連接到 App.js）。 如何重新制作並將其放入單獨的文件中？ 自定義掛鈎的自定義 function 會更好嗎？

Answer 1

useEffect 是 React 為功能組件提供的鈎子。 您可以通過從 react 中導入來在任何組件中使用它，如下所示。 您不需要從一個組件傳遞到另一個組件。

import { useEffect } from 'react';

有關詳細信息，您可以在 hooks 此處閱讀他們的官方文檔。 https://reactjs.org/docs/hooks-reference.html