Блог

Я новичок в react и сборнике рассказов, и вот в чем проблема : мой компонент todo выглядит так:

 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' />)



 

и вот моя ошибка в сборнике рассказов:

Не удается прочитать свойство «ключ» неопределенного типа Ошибка: Не удается прочитать свойство «ключ» неопределенного в Todo (http://localhost:9009/main.iframe.bundle.js:768:34) при визуализации с помощью крючков (http://localhost:9009/vendors~main.iframe.bundle.js:89536:18) в компоненте mountIndeterminateComponent (http://localhost:9009/vendors~main.iframe.bundle.js:92362:13) в начале работы (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.комплект.Яш:78545:16) в invokeGuardedCallback (http://localhost:9009/vendors~главном.элемент iframe.пакет.Яш:78607:31) на beginWork$1 (http://localhost:9009/vendors~главном.элемент iframe.пакет.Яш:98510:7) в performUnitOfWork (http://localhost:9009/vendors~главном.элемент iframe.пакет.Яш:97322:12) в workLoopSync (http://localhost:9009/vendors~главном.элемент iframe.пакет.Яш:97253:5)

Я не знаю, что мне делать.

Установите реквизит элемента

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

Вот отредактированная(и правильная) форма моего сборника рассказов:

 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 }} />)