使用React Simple Chatbot API时出现选项文本重复问题

问题描述 #

使用React Simple Chatbot配置选项功能时，明明只定义了3个选项，实际运行后却显示6个（包含3个重复项）。

配置代码 #

const steps = [
    {
        id: '1',
        message: 'Those Are The Services That I am offering ,Please Choose A Service?',
        trigger: '2',
    },
    {
        id: '2',
        options: [{
                value: "Web Developement",
                label: 'Web Developement',
                trigger: '3'
            },
            {
                value: "Data Science",
                label: 'Data Science',
                trigger: '4'
            },
            {
                value: "AI & Deep Learning",
                label: 'AI & Deep Learning',
                trigger: '4'
            },
        ],
    },
    {
        id: '3',
        message: 'Wrong answer, try again.',

    },
    {
        id: '4',
        message: 'Awesome! You are a telepath!',

    },
];

解决方案 #

1. 避免Chatbot组件重复渲染 #

检查父组件中是否重复渲染了Chatbot实例（比如在循环、条件渲染或每次组件更新时重新创建Chatbot）。给Chatbot添加唯一的key属性可以避免这个问题：

<Chatbot key="stable-chatbot-key" steps={steps} />

2. 固定steps数组引用 #

如果steps定义在组件内部，每次组件渲染都会重新创建数组，可能导致Chatbot重复解析选项。使用useMemo包裹steps，确保数组引用稳定：

import { useMemo } from 'react';

const steps = useMemo(() => [
    // 你的steps配置内容
], []);

3. 调整组件版本 #

部分版本的react-simple-chatbot存在选项重复的bug，尝试升级到最新稳定版：

npm install react-simple-chatbot@latest

或降级到已知无此问题的版本（如^0.6.1）。

内容的提问来源于stack exchange，提问作者ibrahim lakhzine