无法读取属性 'key' 未定义的故事书反应

Question

我是 React 和 Storybook 的新手，问题是：我的待办事项组件是这样的：

import React, { useState, useContext } from 'react';
import EditTodo from './EditTodo'
import TodosContext from '../../Context/todos';
import axios from 'axios';
import { Link } from 'react-router-dom'

function Todo(props) {
    const { item } = props

    const [edit, setEdit] = useState(false)
    const todosContext = useContext(TodosContext)

    const [loading, setLoading] = useState(false)


    let editHandler = text => {
        setLoading(true)
        axios.put(`/todos/${item.key}.json`, { done: item.done, text })
            .then(response => {
                todosContext.dispatch({ type: 'edit_todo', payload: { key: item.key, text } })
                setLoading(false)
            })
            .catch(err => console.log(err))



        setEdit(false);
    }

    let doneHandler = e => {
        setLoading(true)
        axios.put(`/todos/${item.key}.json`, { done: !item.done, text: item.text })
            .then(response => {
                todosContext.dispatch({ type: 'toggle_todo', payload: { key: item.key } })
                setLoading(false)
            })
            .catch(err => console.log(err))

    }

    let deleteHandler = e => {
        setLoading(true)
        // ajax 
        axios.delete(`/todos/${item.key}.json`)
            .then(response => {
                todosContext.dispatch({ type: 'delete_todo', payload: { key: item.key } })
                setLoading(false)
            })
            .catch(err => {
                console.log(err);
            })
    }
    
    return (
        <>
            {
                loading
                    ? <div className="spinner-border text-info" role="status"></div>
                    : (

                        <>
                            {
                                edit
                                    ? <EditTodo text={item.text} edit={editHandler} />
                                    : (
                                        <div className='col-6 mb-2'>
                                            <div className="d-flex justify-content-between align-items-center border rounded p-3">
                                                <div>
                                                    <Link to={`/todos/${item.key}`}>{item.text} </Link>
                                                </div>
                                                <div>
                                                    {
                                                        !item.done
                                                            ? <button type="button"
                                                                className="btn btn-success btn-sm me-1"
                                                                onClick={doneHandler}>
                                                                Done</button>
                                                            : <button type="button"
                                                                className="btn btn-warning btn-sm me-1"
                                                                onClick={doneHandler}>
                                                                Undone</button>
                                                    }
                                                    
                                                    <button type="button"
                                                        className="btn btn-info btn-sm me-1"
                                                        onClick={() => setEdit(true)}>Edit</button>
                                                    <button type="button"
                                                        className="btn btn-danger btn-sm "
                                                        onClick={deleteHandler}>Delete</button>
                                                </div>
                                            </div>
                                        </div>
                                    )
                            }
                        </>
                    )
            }
        </>
    )
}

export default Todo;

我知道这个组件可以正常工作，但这是我的故事书：

import React from 'react';
import { storiesOf } from '@storybook/react';

import Todo from '../Components/Todo/Todo';


storiesOf("Todo/Todo", module)
    .add("Todo", () => <Todo key='1' text='Test Task' done='true' />)

这是我在故事书中的错误：

无法读取未定义的属性 'key' 类型错误：无法读取未定义的属性 'key' 在 Todo (http://localhost:9009/main.iframe.bundle.js:768:34) 在 renderWithHooks (http://localhost:9009/vendors~main.iframe.bundle.js:89536:18) 在 mountIndeterminateComponent (http://localhost:9009/vendors~main.iframe.bundle.js:92362:13) 在 beginWork (http://localhost:9009/vendors~main.iframe.bundle.js:93600:16) 在 HTMLUnknownElement.callCallback (http://localhost:9009/vendors~main.iframe.bundle.js:78496:14) 在 Object.invokeGuardedCallbackDev (http://localhost:9009/vendors~main.iframe.bundle.js:78545:16) 在 invokeGuardedCallback (http://localhost:9009/vendors~main.iframe.bundle.js:78607:31) 在 beginWork$1 (http://localhost:9009/vendors~main.iframe.bundle.js:98510:7) 在 performUnitOfWork (http://localhost:9009/vendors~main.iframe.bundle.js:97322:12) 在 workLoopSync (http://localhost:9009/vendors~main.iframe.bundle.js:97253:5)

不知道该怎么做。

Answer 1

设置物品道具

storiesOf("Todo/Todo", module)
    .add("Todo", () => <Todo item={{key:'1', text:'Test Task', done:true}} />)

Answer 2

这是我的故事书的编辑（和正确）形式：

import React from 'react';
import { storiesOf } from '@storybook/react';
import StoryRouter from 'storybook-react-router';
import Todo from '../Components/Todo/Todo';


storiesOf("Todo/Todo", module)
    .addDecorator(StoryRouter())
    .add("Todo", () => <Todo item={{ key: '1', text: 'Test Task', done: true }} />)

无法读取属性 'key' 未定义的故事书反应

Cannot read property 'key' of undefined storybook react

reactjs

storybook

无法读取 属性 'key' 未定义的故事书反应

Cannot read property 'key' of undefined storybook react

reactjs

storybook

无法读取属性 'key' 未定义的故事书反应