反应。重新渲染嵌套数组答案

【问题标题】：React. Rerendering nested array反应。重新渲染嵌套数组
【发布时间】：2023-02-16 20:43:55
【问题描述】：

我正在构建测验应用程序，但有一个问题，我必须打乱问题选项，但它们位于嵌套问题数组中。这是界面：

export interface IConnectionsQuestionData extends IQuestionData {
    type: 'connections';
    questionsTitle: string;
    answersTitle: string;

    pairs: {
        questionOption: IConnectionsOption;
        answerOption: Maybe<IConnectionsOption>;
    }[];
} 

export interface IConnectionsOption {
    key: IDType;
    value: string;
    type: 'answer' | 'question'
}

因此，为了随机播放选项，我创建了自定义 useShuffle 挂钩：

export const useShuffle = <T>(array: T[]): T[] => {
    return useMemo(() => {
        return shuffleArray(array);
    }, [array]) 
}

在 Question 组件中，我从道具中得到 question。我像这样使用这个钩子：

 const shuffledLeftSideOptions = useShuffle(question?.pairs.map(pair => pair.questionOption) ?? [])
 const shuffledRightSideOptions = useShuffle(question?.pairs.map(pair => pair.answerOption) ?? [])

但是每次当我选择选项时需要重新渲染组件时，选项数组会在每次渲染时再次洗牌。我尝试对其进行测试，它与 pairs 数组一起工作正常，但与 question 或 answer 选项重新洗牌。

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

您只记住了洗牌，而不是 map 操作。所以你每次都会得到一个新数组，因为 map 每次都会生成一个新数组，所以 useShuffle 每次都必须完成它的工作。

如果你需要做map，你也需要记住它，例如：

const mappedLeftOptions = useMemo(
    () => question?.pairs.map((pair) => pair.questionOption) ?? [],
    [question]
);
const mappedRightOptions = useMemo(
    () => question?.pairs.map((pair) => pair.answerOption) ?? [],
    [question]
);
const shuffledLeftSideOptions = useShuffle(mappedLeftOptions);
const shuffledRightSideOptions = useShuffle(mappedRightOptions);

【讨论】：