React Context 值已更新，但组件不会重新渲染答案

【问题标题】：React Context value gets updated, but component doesn't re-renderReact Context 值已更新，但组件不会重新渲染
【发布时间】：2022-01-21 08:08:55
【问题描述】：

这个Codesandbox目前只有移动样式

我目前有一个根据其状态呈现的项目列表。

目标：当用户点击模态框内的导航按钮时，它会更新上下文中的状态类型。另一个名为 SuggestionList 的组件通过 useContext 使用上下文并呈现设置为新状态的项目。

问题：上下文中的值肯定正在更新，但使用上下文的 SuggestionList 组件没有根据上下文的状态使用新的项目列表重新呈现。

这似乎是一个常见的问题：

Does new React Context API trigger re-renders?

React Context api - Consumer Does Not re-render after context changed

Component not re rendering when value from useContext is updated

我尝试了很多来自不同帖子的建议，但我无法弄清楚为什么我的 SuggestionList 组件没有在上下文中的值更改时重新呈现。我希望有人能给我一些见解。

上下文.js

// CONTEXT.JS

import { useState, createContext } from 'react';

export const RenderTypeContext = createContext();

export const RenderTypeProvider = ({ children }) => {
  const [type, setType] = useState('suggestion');

  const renderControls = {
    type,
    setType,
  };

  console.log(type); // logs out the new value, but does not cause a re-render in the SuggestionList component

  return (
    <RenderTypeContext.Provider value={renderControls}>
      {children}
    </RenderTypeContext.Provider>
  );
};

SuggestionPage.jsx

   // SuggestionPage.jsx
    
    export const SuggestionsPage = () => {
      return (
        <>
          <Header />
          <FeedbackBar />
          <RenderTypeProvider>
            <SuggestionList />
          </RenderTypeProvider>
        </>
      );
    };

建议列表.jsx

// SuggestionList.jsx

import { RenderTypeContext } from '../../../../components/MobileModal/context';

export const SuggestionList = () => {
  const retrievedRequests = useContext(RequestsContext);
  const renderType = useContext(RenderTypeContext);
  const { type } = renderType;

  const renderedRequests = retrievedRequests.filter((req) => req.status === type);

  return (
    <main className={styles.container}>
      {!renderedRequests.length && <EmptySuggestion />}
      {renderedRequests.length &&
        renderedRequests.map((request) => (
          <Suggestion request={request} key={request.title} />
        ))}
    </main>
  );
};

Button.jsx

// Button.jsx

import { RenderTypeContext } from './context';

export const Button = ({ handleClick, activeButton, index, title }) => {
  const tabRef = useRef();
  const renderType = useContext(RenderTypeContext);
  const { setType } = renderType;

  useEffect(() => {
    if (index === 0) {
      tabRef.current.focus();
    }
  }, [index]);

  return (
    <button
      className={`${styles.buttons} ${
        activeButton === index && styles.activeButton
      }`}
      onClick={() => {
        setType('planned');
        handleClick(index);
      }}
      ref={index === 0 ? tabRef : null}
      tabIndex="0"
    >
      {title}
    </button>
  );
};

谢谢

【问题讨论】：

标签： reactjs use-context

【解决方案1】：

经过一夜的休息，我终于解决了。当你累了会想念的东西真是太棒了。

我没有意识到我将相同的提供者放置为它自己的孩子。一旦我删除了嵌套在自身内部的子提供者，并将“父”提供者稍微提升到树上，一切都开始工作了。

所以问题不在于使用上下文的组件没有更新，而是我的提供者位置相互冲突。我忘记了我的组件树。愚蠢的错误。

故事的寓意是，累了会让你看不到解决方案。好好休息吧。

【讨论】：