当上下文改变时,组件不会重新渲染

问题描述 投票:0回答:1

我一直在玩react context api,但我就是不明白为什么它不能工作。

我有一个带容器的组件,它应该根据上下文中存储的valuer来显示或隐藏。

这就是这个组件。

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那样触发所有子组件的重新渲染。然而,显示这个的组件是直接调用上下文的,所以就我看来,重新渲染应该是有效的。

我是不是漏掉了什么明显的东西?

先谢谢你!Stef

reactjs react-props context-api
1个回答
0
投票

忘记上面的内容吧... 我是个白痴--将应用程序的两个独立部分分别封装在两个不同的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>
  );
};

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

© www.soinside.com 2019 - 2024. All rights reserved.