0

我为过滤器菜单设置了一个由三部分组成的组件。组件 A) 是 createContext，它有一个包含我的 globalData 数据的对象和一个用于更改数据的函数 setData。当 setData 被触发时，它会从数据库中检索数据并更新我的 globalData.data。组件 B) 触发组件 A 并传递适当的值（这部分有效）。组件 C) 是用于检索数据的 useContext 和用于显示数据的用户 .Provider。

问题是组件 C 不会重新渲染任何组件。

组件 A) 创建上下文和函数以更改上下文

import React, { createContext } from 'react';
import APIEndpoint from 'src/js/api/apAPIEndpoint.js';

const globalData={data:{kpi:[]}, filters:{date:'', login:'9166', country:[], city:[]}, setData:(field, value)=>{

    globalData.filters = {...globalData.filters,[field]:value};
    let fetchURL = `/APIURL?alias=${parseInt(globalData.filters.login)}&${globalData.filters.country.map((item)=>('country='+item.country)).join('&')}&${globalData.filters.city.map((item)=>('city='+item.city)).join('&')}`;

    if(globalData.filters.login && globalData.filters.country.length>0 && globalData.filters.city.length>0){
      APIEndpoint
        .get(fetchURL)
        .then(res => {
          globalData.data={...globalData, data:res.data.data};
        });
    }
  }
};
const GlobalDataContext = createContext(globalData);

export default GlobalDataContext;

组件 B) 触发 (A) 中的上下文更改

import React, {useContext} from 'react';
import GlobalDataContext from '/GlobalDataContext';

const globalData = useContext( GlobalDataContext );
const setGlobalData = globalData ? globalData.setData : null;
...
return(
<div>
<StyledSelect
onChange={(value) =>{
          setGlobalData(props.valueField, value);
        }} />
</div>
)

组件 C) 这是它不会重新渲染的地方。只想在第 2 节下重新渲染一个组件

import React, { useContext } from 'react';
import GlobalDataContext from '/GlobalDataContext';
const {data, setData} = useContext( GlobalDataContext );
...
return (
    <>
      <Helmet>
        <title>Something - Home</title>
      </Helmet>
      <StencilResponsiveDesign sizes={[VIEWPORT_SIZES.S, VIEWPORT_SIZES.M]}>
        ...
      {/* Section 1 */}
              <FilterBar />
              <Spacer height={50} />

      {/* Section 2 */}
              <GlobalDataContext.Provider value={globalData.data.kpi}> 
                <div>
                  <KpiWidget />
                </div>
              </GlobalDataContext.Provider>
4

0 回答 0