所以我做了这个应用程序，它使用一个对象数组来呈现数据。我还对这些数据进行了分类，以便可以根据类别将其排序到不同的数组中。每个对象可以有多个类别，因此在多个数组之间列出。

{
    belongsTo: String,
    name: "Front Line Salvager I",
    description: "Complete Salvage or Deep Dive activities...",
    category: ['Deep Dive', 'Salvage'],
    completed: false,
    challengeIndex: Number,
    objectives: [...],
    reward: null,
    xp: "Challenger XP+",
    dust: null
  },

因此，此数据将存在并呈现在两个数组中：

const activityChallenges = [
        {
            name: 'Deep Dive',
            challenges: []
        },
        {
            name: 'Salvage',
            challenges: []
        }
]

我使用一个自定义上下文挂钩为所有数据创建状态。这个解决方案在我开始分类之前工作得很好，所有的东西都呈现在页面上，没有重复。

<section className='ChallengeCategory-Body' id={ChallengeCategoryContainerID}>
                {props.challenges.map((challenge) => {
                    let uuid = crypto.randomUUID();
                    return (
                        // Wrap the State Provider for Individual 
                        // Challenges and Pass Challenge Data 
                        // to Dispatch Initial State
                        <ChallengeProvider
                            key={uuid}
                            data={{ challenge }}
                        >
                            // React component to render data
                            <ChallengeCard
                                key={uuid}
                                // key={uuidv4()}
                                challengesRemainingID={challengesRemainingID}
                                togglerID={togglerID}
                                activityHeader={activityHeader}
                            />
                        </ChallengeProvider>
                    )
                })}
            </section>

所以，我想知道如何在两个对象之间共享状态，这两个对象在两个不同的数组中呈现，但基本上是相同的数据。用户可以切换复选框并在选择框中设置进度。应用程序将更新已完成任务的布尔值。但我想有对象的每个示例同步时，用户更改选择选项或复选框。这是我在渲染页面duplicate object data that does not share state上讨论的一个示例
我尝试使用相同的键，并了解到如果传递相同的键，则react根本不会起作用。最初从本地存储工作，但我创建了一个mongo数据库来在设备之间同步。实际上，我应该为这些数组中的每个对象创建一个文档，但不想重构整个应用程序😅