reactjs - React 告诉我，我不能在 contextAPI 的“Provider”函数中使用钩子

Question

我正在关注一篇文章：https ://dev.to/mongopark/learn-react-hooks-and-context-api-by-building-a-recipe-search-app-2-1g3o 。在其中，他在他创建的 Context 中使用了 useState 和 useEffect。当我尝试做同样的事情时。我收到错误消息，“第 10:28 行：React Hook “useState”在函数“dataProvider”中被调用，该函数既不是 React 函数组件，也不是所有钩子的自定义 React Hook 函数 react-hooks/rules-of-hooks . 我只想知道我在这里做错了什么。

import React, {useState, useEffect, createContext} from 'react';
import { headerFooter } from '../../api/Api';
import {setHeaderFooter} from '../../functions/generalFunctions'
import {grabUserInventory} from '../../api/Api'
import {getAllOrgs} from '../../api/Api'

 const dataContext = createContext()

const dataProvider = (props) => {
    const [data, setData] =useState("")
    const [combined, setCombined] =useState(0)
    const [inventory, setInventory] =useState([])
    const [notes, setNotes] =useState([])
    const [orgs, setOrgs] =useState([])
    const [renderedData, setRenderedData]=useState([])
    const [progress,setProgress] = useState(true)


useEffect(()=>{
    console.log(props.match.params.token)
    headerFooter(props.match.params.token)
    .then(res=>{
    setData(res)
    setHeaderFooter(res.header,res.footer)
    return grabUserInventory(res.user_id)
        .then(data=>{
        setInventory(data)
        setRenderedData(data)
        setProgress(false)
            return getAllOrgs()
                .then(data=>{
                var outputData = data.map( Object.values );
                setOrgs(outputData)
            })
        })
    })
    .catch(err=>console.error(err))
    }, []);


    return (
            <dataContext.Provider value={{
            data,
            setData,
            combined,
            setCombined,
            inventory,
            setInventory,
            orgs,
            setOrgs,
            renderedData,
            setRenderedData,
            progress,
            setProgress
            }}>
                {props.children}
            </dataContext.Provider>
        );
    }
 
    export { dataProvider,  dataContext }

标签： reactjsasynchronousreact-hooksreact-context