React Context 值已更新，但组件未重新渲染

Question

该Codesandbox目前仅具有移动样式

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

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

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

这似乎是一个常见问题：

新的 React Context API 是否会触发重新渲染？

React Context api - 上下文更改后消费者不会重新渲染

当 useContext 的值更新时，组件不会重新渲染

我已经尝试了来自不同帖子的很多建议，但我只是无法弄清楚为什么我的 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>
  );
};

建议页.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>
  );
};

按钮.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>
  );
};

谢谢

Answer 1

经过一夜的休息，终于解决了这个问题。令人惊奇的是，当你疲倦时，你会错过什么。

我没有意识到我将同一个提供程序作为其自身的子项放置。一旦我删除了嵌套在其自身中的子提供程序，并将“父”提供程序稍微提升到树上，一切就开始工作了。

因此，问题不在于使用上下文的组件没有更新，而是我对提供程序的放置相互冲突。我失去了我的组件树的踪迹。愚蠢的错误。

这个故事的寓意是，疲倦会让你看不到解决办法。休息。