Reactjs 上下文更改后组件未重新呈现

“myGroups”是一个上下文变量。在我的上下文存储中，我从数据库获取数据并填充这个“myGroups”变量。所以最初它只包含一个空数组，一段时间后它包含一个对象数组。e、 g.{id:，数据：}]

我要渲染这些组。因此，我正在映射myGroups变量，并尝试渲染它们

但问题是，即使在上下文更新之后，我的组件也不会重新呈现。我已经在控制台上记录了日志，并且看到数据的获取工作非常好，尽管这样做需要一些时间

更改上下文是否不会重新引发消费者的兴趣？为什么部件没有重新招标？如果你能提供一些解决方案，那将是非常有帮助的。提前谢谢

这是我的密码

import React, { useContext, useEffect, useState } from 'react';

import "../css/MyGroups.css";
import GroupCard from './GroupCard';
import { GlobalContext } from '../context/GlobalState';

const MyGroups = () => {
    const { myGroups } = useContext(GlobalContext);

    useEffect(() => console.log(myGroups), [myGroups]); // Debugging 

    return (
        <div className="my__groups">
            <h1 className="my__groups__heading">My Groups</h1>
            <div className="my__groups__underline"></div>
            <div className="my__groups__grid__container">
                {
                    myGroups.map(({id, data}) => (
                        <GroupCard
                            key={id}
                            name={data.name}
                            image={data.image} 
                        />
                    ))
                }
            </div>
        </div>
    )
}

export default MyGroups

编辑2:Reducer

const Reducer = (state, action) => {
    switch(action.type) {
        case FETCH_GROUPS_FROM_DATABASE:
            return {
                ...state, 
                myGroups: action.payload
            };
        default:
            return state;
    }
}

export default Reducer;

如上所述，不需要使用

useState

和

useffect

。您可以用两种不同的方式使用上下文

首先：

const MyGroups = () => (
  <GlobalContext.Consumer>
    {({ myGroups }) => (
         <div className="my__groups">
            <h1 className="my__groups__heading">My Groups</h1>
            <div className="my__groups__underline"></div>
            <div className="my__groups__grid__container">
                {myGroups.map(({id, data}) => (
                        <GroupCard
                            key={id}
                            name={data.name}
                            image={data.image} 
                        />
                    ))
                }
            </div>
        </div>
    )}
  </GlobalContext.Consumer>
);

const MyGroups = () => {
  const { myGroups } = useContext(GlobalContext);

  return (
    <div className="my__groups">
      <h1 className="my__groups__heading">My Groups</h1>
      <div className="my__groups__underline"></div>
      <div className="my__groups__grid__container">
        {myGroups.map(({ id, data }) => (
          <GroupCard key={id} name={data.name} image={data.image} />
        ))}
      </div>
    </div>
  );
};

---

您确实不需要在组件的本地状态中保存

myGroups

。每当上下文中的内容更新时，使用该上下文的所有组件都将重新呈现。因此，使用

useState

从上下文中保存一些数据是完全不必要的。您可以共享您的

GlobalContext

？遵循您的语法…但是我的组件在上下文更改或状态更改时都没有重新呈现…您可以共享您的GlobalContext吗？您是否将组件包装在

GlobalContext

中？MyGroups组件是主组件的子组件。在我问题的最后一个部分，我还展示了MyGroups上下文的控制台日志的图像。你也可以看一下并检查一下。

const MyGroups = () => (
  <GlobalContext.Consumer>
    {({ myGroups }) => (
         <div className="my__groups">
            <h1 className="my__groups__heading">My Groups</h1>
            <div className="my__groups__underline"></div>
            <div className="my__groups__grid__container">
                {myGroups.map(({id, data}) => (
                        <GroupCard
                            key={id}
                            name={data.name}
                            image={data.image} 
                        />
                    ))
                }
            </div>
        </div>
    )}
  </GlobalContext.Consumer>
);

const MyGroups = () => {
  const { myGroups } = useContext(GlobalContext);

  return (
    <div className="my__groups">
      <h1 className="my__groups__heading">My Groups</h1>
      <div className="my__groups__underline"></div>
      <div className="my__groups__grid__container">
        {myGroups.map(({ id, data }) => (
          <GroupCard key={id} name={data.name} image={data.image} />
        ))}
      </div>
    </div>
  );
};

async function fetchGroupsFromDatabase(id) {
    const doc = await db.collection("users").doc(id).get() // Fetch user details with given id 
    const myGroups = await Promise.all(
        doc.data().groupIDs.map(groupID => // Fetch all group IDs of the user
            db.collection("groups").doc(groupID).get() // Fetch all the groups 
                .then(doc => ({ id: doc.id, data: doc.data() }))
        )
    );
    const action = {
        type: FETCH_GROUPS_FROM_DATABASE,
        payload: myGroups
    };
    dispatch(action);
}