React Todo组件在Storybook中运行报错Cannot read property 'key' of undefined如何解决

报错根因 #

你的Todo组件定义中是从props解构item属性后使用相关字段，但编写Storybook用例时没有传递item属性，而是将key、text、done直接作为顶层props传入，导致组件内部拿到的item为undefined，访问item.key就触发了当前的类型错误。

修复步骤 #

1. 修正Storybook传参格式，补充缺失的依赖环境 #

你需要给Todo组件传递符合预期的item属性，同时补充组件依赖的路由、Context环境，避免后续抛出其他错误，修正后的Storybook代码如下：

import React from 'react';
import { storiesOf } from '@storybook/react';
import { MemoryRouter } from 'react-router-dom';
// 调整为你项目中TodosContext对应的实际路径
import TodosContext from '../../Context/todos';
import Todo from '../Components/Todo/Todo';

// 构造模拟的item数据
const mockItem = {
  key: '1',
  text: 'Test Task',
  done: true
}

// 构造模拟的Context值，避免dispatch调用报错
const mockContextValue = {
  dispatch: (action) => console.log('触发操作：', action)
}

storiesOf("Todo/Todo", module)
  .add("基础展示", () => (
    {/* 提供路由环境，适配Link组件 */}
    <MemoryRouter>
      {/* 注入模拟的TodosContext */}
      <TodosContext.Provider value={mockContextValue}>
        <Todo item={mockItem} />
      </TodosContext.Provider>
    </MemoryRouter>
  ))

2. 可选：拦截axios请求（避免真实接口调用） #

如果不想在Storybook预览时触发真实的接口请求，你可以直接在Storybook的配置文件中全局mock axios，或者在当前用例中mock相关的axios方法。

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