Question

我为过滤器菜单设置了一个由三部分组成的组件。组件A）是createContext，它具有一个包含我的globalData数据的对象和一个用于更改数据的setData函数。触发setData时，它将从数据库中检索数据并更新my 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>

反应useContext不触发重新渲染

0 个答案: