我一直在玩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;
为了完整起见,上下文被分为三个部分,对上下文本身的调用,一个 "状态 "文件和一个减速器。这些部分显示在下面。
import { createContext } from 'react';
const resultsContext = createContext();
export default resultsContext;
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;
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
忘记上面的内容吧... 我是个白痴--将应用程序的两个独立部分分别封装在两个不同的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>
);
};
希望这对其他人有用...