React通过Provider传递状态时data对象无法在子组件获取如何解决

问题根因排查 #

你代码里一共存在5处直接导致问题的错误：

• 1. hooks/ArticlesProviders.js 顶部的两个export default语法错误，既写在了import语句之前，又重复导出不存在的变量，会导致模块加载失败
• 2. 接口请求赋值逻辑错误：你把axios返回值存在了response变量里，但是调用setData的时候用了未定义的request.data，这里会直接抛出引用错误，data状态永远不会被更新
• 3. 组件内useEffect的打印时机错误：getArticles是异步函数，你调用后立即打印hooked.data时，接口请求还没完成，setData还没执行，自然拿到的是初始空值
• 4. components/Posts/index.js 中没有从react导入useContext，会触发未定义报错
• 5. 路由配置错误：react-router-dom的Switch组件仅允许直接嵌套Route/Redirect组件，你把AppProviders放在Switch内部包裹路由会导致路由匹配逻辑异常

修复后代码示例 #

hooks/ArticlesProviders.js

import React, {useCallback, useState} from 'react'; 
import api from '../services/api';

export const ArticleContext = React.createContext()

export const ArticlesProvider = ({children}) => {
  const [data, setData] = useState('')

  const getArticles = useCallback(async () => {
    const response = await api.get('articles', {
      headers: {
        'Authorization': 'token 03d379c9e9d9bc74eaf38fccd66c94a2ade8a45c'
      },
    })
    console.log("dentro da API: ", response.data)
    setData(response.data)
  }, [])
  
  return (
    <ArticleContext.Provider value={{data, getArticles, x: "Contexto"}}>
      {children}
    </ArticleContext.Provider>
  )
}

routes/index.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import UserForm from '../components/Forms/UserForm';
import Articles from '../pages/Articles';
import AppProviders from '../hooks';

const Routes = () => (
  <AppProviders>
    <Switch>
      <Route path="/login" exact component={UserForm} />
      <Route path="/articles" component={Articles} />
    </Switch>
  </AppProviders>
)

export default Routes;

components/Posts/index.js

...
import React, { useContext, useState, useEffect } from 'react';
import { ArticleContext } from '../../hooks/ArticlesProvider';
import { useStyles } from './styles';

export default function Post() {
  const hooked = useContext(ArticleContext)
  const [articles, setArticles] = useState([])
  const classes = useStyles();
  const [expanded, setExpanded] = React.useState(false);

  useEffect(()=>{
    const fetchData = async () => {
      await hooked.getArticles()
      console.log("Data: ", hooked.data)
    }
    fetchData()
    console.log("Dados teste: ", hooked.x)
  },[hooked])
...

内容的提问来源于stack exchange，提问作者Alex Sousa