上下文更改时组件不会重新呈现

Posted 2023-02-22

【中文标题】上下文更改时组件不会重新呈现

【英文标题】：Component does not rerender when context changes

【发布时间】：2020-09-14 10:24:12

【问题描述】：

我一直在使用 react context api，但我只是不明白为什么它不起作用。

我有一个带有容器的组件，该容器应根据上下文中存储的估值器显示或隐藏。

这是组件：

import React,  useContext  from 'react';
import ResultsContext from '../../context/results/resultsContext';

const ResultsPanelContainer = () => 
  const resultsContext = useContext(ResultsContext);
  const  showResults  = resultsContext;

  console.log('showResults in ResultsPanelConatiner: ', showResults);
  return (
    <div
      className='container-fluid panel'
      style= display: showResults ? 'block' : 'none' 
    >
      <div className='container'>
        <div className='row'>
          <div className='col'>
            <h1 className='display-4'>Results.Panel.js</h1>
          </div>
        </div>
      </div>
    </div>
  );
;

export default ResultsPanelContainer;

为了完整起见，上下文分为三个部分，对上下文本身的调用、“状态”文件和减速器。如下所示：

resultsContext.js

import  createContext  from 'react';
const resultsContext = createContext();
export default resultsContext;

ResultsState.js

import React,  useReducer  from 'react';

// import axios from 'axios';
import ResultsContext from './resultsContext';
import ResultsReducer from './resultsReducer';

import  UPDATE_SHOW_RESULTS  from '../types';

const ResultsState = (props) => 
  const initialState = 
    showResults: false,
  ;

  const [state, dispatch] = useReducer(ResultsReducer, initialState);

  const updateShowResults = (data) => 
    console.log('updateShowResults - ', data);
    dispatch(
      type: UPDATE_SHOW_RESULTS,
      payload: data,
    );
  ;

  return (
    <ResultsContext.Provider
      value=
        showResults: state.showResults,
        updateShowResults,
      
    >
      props.children
    </ResultsContext.Provider>
  );
;

export default ResultsState;

resultsReducer.js

import  UPDATE_SHOW_RESULTS  from '../types';

export default (state, action) => 
  switch (action.type) 

    case UPDATE_SHOW_RESULTS:
      return 
        ...state,
        showResults: action.payload,
      ;

    default:
      return state;
  
;

更改是通过单击单独组件中的按钮触发的，并且此确实会触发上下文中的更新，如您将其记录到控制台时所示。但是，组件不会重新渲染。

通过阅读此处的各种答案，我了解到更改上下文不会像 setState 那样触发所有子组件的重新呈现。但是，显示此内容的组件是直接调用上下文，据我所知，重新渲染应该生效。

我是否遗漏了一些明显的东西？

提前致谢。 史蒂夫

【参考方案1】：

忘记上面的...我是个白痴 - 将应用程序的两个独立部分包装在两个不同的未通信的 ResultsState 实例中。这样做：

const App = () => 
  return (
    <Fragment>
      <UsedDataState>
        <Header />
      </UsedDataState>
      <main>
        <ExportPanelContainer />
        <ResultsState>
          <SendQueryState>
            <OrQueryState>
              <AndQueryState>
                <QueryPanelContainer />
              </AndQueryState>
            </OrQueryState>
          </SendQueryState>
         </ResultsState>
         <ResultsState>
          <ResultsPanelContainer />
        </ResultsState>
      </main>
    </Fragment>
  );
;

而不是这个：

const App = () => 
  return (
    <Fragment>
      <UsedDataState>
        <Header />
      </UsedDataState>
      <main>
        <ExportPanelContainer />
        <ResultsState>
          <SendQueryState>
            <OrQueryState>
              <AndQueryState>
                <QueryPanelContainer />
              </AndQueryState>
            </OrQueryState>
          </SendQueryState>
          <ResultsPanelContainer />
        </ResultsState>
      </main>
    </Fragment>
  );
;

希望这对其他人有用...