上下文更改后组件不会重新渲染

如何解决上下文更改后组件不会重新渲染

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

我想渲染这些组。所以我通过 myGroups 变量进行映射，并尝试呈现它们。

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

改变上下文不会重新渲染它的消费者吗？为什么组件不重新渲染？如果你能提供一些解决方案，那将是非常有帮助的。提前致谢。

这是我的代码。

@bot.command()
async def addrole(ctx,member: discord.Member,role: discord.Role):
    await member.add_roles(role)
    await ctx.send(f'{member} now has the {role} role')

这是我在上下文更改时在控制台上得到的信息： Console log image

我的全球供应商：

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

MyGroups 组件是主组件的后代。

编辑 1：获取我商店的功能

<GlobalProvider>
      <BrowserRouter>
        <Main />
      </BrowserRouter>
</GlobalProvider>

编辑 2：Reducer

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

解决方法

正如Yousaf所说，不需要使用dataset.drop_duplicates() 和useState。您可以通过两种不同的方式使用上下文

第一：

useEffect

第二个：

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>
);

编辑： 问题来自基于此 answer 的 Fetch 函数应该是这样的：

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>
  );
};