useEffect 在反应中的上下文 api 中不起作用答案

【问题标题】：useEffect do not work in context api in reactuseEffect 在反应中的上下文 api 中不起作用
【发布时间】：2021-06-03 21:45:37
【问题描述】：

我是一名学习 React 的学生。我正在制作一个使用功能性 React 的项目，hook。当我在类类型 react 中使用 context api 时，componentDidmount 正在提供程序中工作。但是，当我在context 中使用功能反应时，useEffect 不起作用！我该如何解决？非常感谢！

BoardContext.js

import { createContext } from 'react';

const BoardContext = createContext();

export default BoardContext;

BoardProvider.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import BoardContext from './BoardContext';

const BoardProvider = ({ children }) => {
  console.log('1. is working!!');
  const [categoryData, setCategoryData] = useState([]);

  useEffect(() => {
    console.log('is not working in useEffect  ');
    fetchData();
  }, []);

  const fetchData = async () => {
    console.log('not working');
    const { data } = await axios('/data/categoryData.json');
    console.log(data);

    setCategoryData(data);
  };

  console.log('is working!');

  return (
    <BoardContext.Provider value={{ categoryData }}>
      {children}
    </BoardContext.Provider>
  );
};
export default BoardProvider;

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './Routes';
import GlobalStyle from './Styles/GlobalStyles';
import { ThemeProvider } from 'styled-components';
import BoardProvider from './BoardProvider';
import theme from './Styles/theme';

ReactDOM.render(
  <BoardProvider>
    <GlobalStyle />
    <ThemeProvider theme={theme}>
      <Routes />
    </ThemeProvider>
  </BoardProvider>,
  document.getElementById('root'),
);

【问题讨论】：

代码乍一看还不错。显示日志后是否有任何输出或错误？
我刚刚上传了下一个错误！
你能告诉我们 TagModalCategory 组件还是你添加的那个const {categoryData} = useContext(BoardContext)
嗯，你的应用在第一次渲染时崩溃了。由于效果在渲染后被调用，因此它们不会运行。该错误表明，您正在尝试访问未定义的 TagModelCategory.js 中的变量 categoryData。您忘记使用useContext了吗？
天哪！我不知道！我解决了这个问题。太感谢了！我将更多地研究生命周期！

标签： javascript reactjs react-hooks react-context

【解决方案1】：

谢谢！如前所述，我正在更改结构，以便类类型上下文 api 变成功能上下文 api。所以我在一行下面注释掉了！我不知道 useEffect 受其他组件中的 useContext 影响。因为我认为 useEffect 会先渲染，所以下面的行稍后会受到影响。实际上，组件执行时的顺序我是看不懂的！

TagModalCategory.js
import React, { useState, useContext } from 'react';
import axios from 'axios';
import styled from 'styled-components';
import theme from '../../Styles/theme';
import BoardContext from '../../BoardContext';

const TagModalCategory = () => {
  //const { categoryData, handleSelector } = useContext(BoardContext);
// because of this comment! I commented out this line! when I delete this comment, the issue was solved!

  const hanldeSelector = id => {
    handleSelector(id);
  };

  const genColor = () => {
    const hexNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
    let result = '#';
    for (let i = 0; i < 6; i++) {
      const randomColor = Math.floor(Math.random() * hexNumber.length);
      result += hexNumber[randomColor];
    }
    return result;
  };
  return (
    <div>
      <CategoryModalContainer>
        <h3>
          Hello!
        </h3>
        <h3>1.choose Category</h3>
        <CategoryItemContainer>
          {categoryData.map(category => {
            return (
              <CategoryItem
                key={category.id}
                genColor={genColor}
                onClick={() => hanldeSelector(category.id)}
              >
                {category.name}
              </CategoryItem>
            );
          })}
        </CategoryItemContainer>
      </CategoryModalContainer>
    </div>
  );
};

export default TagModalCategory;

const CategoryModalContainer = styled.div`
  margin: 20px;
`;
const CategoryItemContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 0.5fr);
  grid-template-rows: repeat(3, 0.5fr);
  grid-gap: 10px;
  margin-top: 20px;
`;
const CategoryItem = styled.button`
  ${theme.categoryStyle}
  background-color: ${props => props.genColor};
`;

【讨论】：