niezidentyfikowany obiekt undefined

Question

Witam,

Mam problem bo pojawił mi się skądś jakiś obiekt undefined

widać go u samej góry który mi miesza w kodzie, nie wiem skąd się wziął.... jako ostatni obiekt w tablicy

taki mam kod

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import Points from './Points'
import alarm from './../assets/alarm.mp3'
import Play from './Play'



function Task(props) {
    console.log(props);
    const clickDelete = (id) => {
        props.deleteItem(id)
    }
    const handlePoint = (id) => {
        props.pointCheck(id)
    }
    const handleTitle = (each) => {
        console.log(each);
        props.titleCheckTask(each)
    }
    console.log(props.items.todos);
    const itemDetail = props.items.todos.filter(each => {
        console.log(each);
        console.log(each.id);
        console.log(props.items.selectedItem.id);
        return each.id === props.items.selectedItem.id
    })
    const editTrue = props.items.todos.filter(each => {
        return each.edit === true
    })
    const editBack = () => {
        props.editTaskState()
    }
    useEffect(() => {
        editBack()
    }, []);

    const clickEdit = (item, id) => {
        props.display(item, id)
        props.editTask(item)
    }

    const [details] = itemDetail
    if (itemDetail.length < 1) {
        return (
            <div className='title'>
                <div className='title-wrapper'>
                    <p>You have no todos left</p>
                </div>
            </div>
        )
    }
    console.log(itemDetail[0].date);
    const alldetails = details.detail.map(each => {
        if (each.point != null)
            return (
                <div key={each.point}>
                    <input onClick={(id) => { handlePoint(each.point) }} className='point-check' id={each.point} type="checkbox" checked={each.pointMarked} />
                    <label className='point-label' htmlFor={each.point}>{each.point}</label>
                </div>
            )
    })

    return (
        <>
            <div className='task-container'>
                <div className='title'>
                    <div className='title-wrapper'>
                        <input onClick={(id) => { handleTitle(itemDetail[0]) }} className='title-check' id={itemDetail[0].title} type="checkbox" checked={itemDetail[0].titleMarked} />
                        <label onClick={(id) => { handleTitle(itemDetail[0]) }} className='title-label' htmlFor="todo" data-content={details.title}>{details.title}</label>
                    </div>
                    <i onClick={() => { clickDelete(details.id) }} className="fas fa-trash-alt"></i>
                </div>
                {alldetails}
                <div>{itemDetail[0].date != null ? (itemDetail[0].date.toLocaleDateString()) : (null)}</div>
                <button onClick={() => { clickEdit(itemDetail[0].id, 'edit') }}>EDIT</button>
            </div>

        </>
    )
}
const mapStateToProps = (state) => {
    console.log(state);
    return {
        items: state.item,
        position: state.position
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        deleteItem: (id) => { dispatch({ type: 'DELETE', id: id }) },
        pointCheck: (id) => { dispatch({ type: 'CHANGE_CHECK', id: id }) },
        titleCheckTask: (each) => { dispatch({ type: 'CHANGE_TITLE_TASK', each: each }) },
        display: (task, id) => { dispatch({ type: 'DISPLAY', task: task, id: id }) },
        editTask: (id) => { dispatch({ type: 'EDIT_TASK', id: id }) },
        editTaskState: () => { dispatch({ type: 'EDIT_TASK_STATE' }) },
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Task)

proszę o pomoc, radę

Comments

Funkcja mapStateToProps jest wołana na każdy update stora. Pokaż więc kod, którym updatujesz store - skąd pojawiają się tam obiekty, gdzie jest m.in. property title: "Walk the dog".

---

dzięki, ale musiałem wrócić do poprzedniego commita, za bardzo namieszałem w kodzie...

---

Jeśli problem nie jest już aktualny, to proszę zamknij temat.

---

dzięki

---

Pisałem od nowa ale mam ten sam błąd, więc jakbyś mógł zerknąć byłbym wdzięczny...

case 'ADD_AFTER_EDIT':
            console.log(action);
            console.log(action.editedTask);
            console.log(state.todos);
            const edited = action.editedTask
            return {
                ...state,
                todos: state.todos.map(each => {
                    if (each.id != action.editedTask.id) return each; return {
                        ...each, edited
                    }

                }),
                selectedItem: { id: action.editedTask.id },
            }

tak updatuję stora

a tak wyświetla się w konsoli

import React, { useState } from 'react'
import { connect } from 'react-redux'
import DatePicker from "react-datepicker"
import "react-datepicker/dist/react-datepicker.css";

function Edit(props) {
    console.log(props);
    console.log(props.add.item.todos[0]);
    const toEdit = props.add.item.todos.filter(each => {
        return each.edit === true
    })
    console.log('toEdit', toEdit);
    let initState
    if (toEdit.length > 0) { initState = toEdit[0] }
    else { initState = props.add.item.todos[0] }
    console.log(toEdit);
    console.log(toEdit.lenghth);
    const [startDate, setStartDate] = useState(null);
    const [editTask, setEditTask] = useState(initState)
    console.log(editTask);


    const handleMouseDown = (e) => {

        if (e.target.id === 'newTask') {

            setEditTask({ ...editTask, title: null })
            console.log('oooooooooooooooooo', editTask);
        }
        if (e.target.id === 'pointOne') {
            setEditTask({
                ...editTask, detail: editTask.detail.map(each => { if (each !== editTask.detail[0]) return each; return { ...each, point: null } }
                )
            })
        }
        if (e.target.id === 'pointTwo') {
            setEditTask({
                ...editTask, detail: editTask.detail.map(each => { if (each !== editTask.detail[1]) return each; return { ...each, point: null } }
                )
            })
        }
        if (e.target.id === 'pointThree') {
            setEditTask({
                ...editTask, detail: editTask.detail.map(each => { if (each !== editTask.detail[2]) return each; return { ...each, point: null } }
                )
            })
        }

    }
    const handleChange = (e) => {
        if (e.target.id === 'newTask') {
            setEditTask({ ...editTask, title: e.target.value })
        }
        if (e.target.id === 'pointOne') {
            setEditTask({
                ...editTask, detail: editTask.detail.map(each => { if (each !== editTask.detail[0]) return each; return { ...each, point: e.target.value } }
                )
            })
        }
        if (e.target.id === 'pointTwo') {
            setEditTask({
                ...editTask, detail: editTask.detail.map(each => { if (each !== editTask.detail[1]) return each; return { ...each, point: e.target.value } }
                )
            })
        }
        if (e.target.id === 'pointThree') {
            setEditTask({
                ...editTask, detail: editTask.detail.map(each => { if (each !== editTask.detail[2]) return each; return { ...each, point: e.target.value } }
                )
            })
        }
    }




    const handleSubmit = (e, id) => {
        e.preventDefault()
        console.log(editTask.id);
        editTask.date = startDate
        props.editTask(editTask)
        props.addAfterEdit(editTask)
        props.displayDetail(editTask.id)
        props.display('task')



    }
    // const handleDate = (date) => {
    //     setStartDate(date)
    // }


    return (
        <>
            <form onSubmit={handleSubmit} type='submit'>
                <input onChange={handleChange} onMouseDown={handleMouseDown} value={editTask.title} placeholder='optional' id='newTask' type="text" />
                <label htmlFor="text">new task</label>
                <input onChange={handleChange} onMouseDown={handleMouseDown}
                    value={editTask.detail[0] ? (editTask.detail[0].point) : (null)}
                    placeholder='optional' id='pointOne' type="text" />
                <label htmlFor="text">point one</label>
                <input onChange={handleChange} onMouseDown={handleMouseDown}
                    value={editTask.detail[1] ? (editTask.detail[1].point) : (null)}
                    placeholder='optional' id='pointTwo' type="text" />
                <label htmlFor="text">point two</label>
                <input onChange={handleChange} onMouseDown={handleMouseDown}
                    value={editTask.detail[2] ? (editTask.detail[2].point) : (null)}
                    placeholder='optional' id='pointThree' type="text" />
                <label htmlFor="text">point three</label>
                <button>EDIT</button>
            </form >
        </>
    )
}
const mapStateToProps = (addNewTask, state) => {
    return {
        add: addNewTask,
        position: state.position
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        editTask: (editTask) => { dispatch({ type: 'EDIT_TASK', editTask: editTask }) },
        addAfterEdit: (editedTask) => { dispatch({ type: 'ADD_AFTER_EDIT', editedTask: editedTask }) },
        displayDetail: (id) => { dispatch({ type: 'DISPLAY_DETAIL', id: id }) },
        display: (id) => { dispatch({ type: 'DISPLAY', id: id }) },
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Edit)

Nie mogę sobie z tym poradzić...

---

Skąd pochodzi oraz jak tworzysz i uzupełniasz state.todos, którego używasz w case dla 'ADD_AFTER_EDIT'?

---

to jest component który tworzy nowy task

import React, { useState } from 'react'
import { connect } from 'react-redux'
import DatePicker from "react-datepicker"
import "react-datepicker/dist/react-datepicker.css"

function Add(props) {
    console.log(props);
    console.log(props.add.item.todos);

    const initTask = {
        title: null,
        titleMarked: false,
        id: null,
        date: null,
        detail: [
            { point: null, pointMarked: false },
            { point: null, pointMarked: false },
            { point: null, pointMarked: false }
        ]
    }

    const [startDate, setStartDate] = useState(null);
    const [newTask, setNewTask] = useState(initTask)
    console.log(newTask.title);


    const handleChange = (e) => {
        if (e.target.id === 'newTask') {
            newTask.title = e.target.value
            console.log(newTask.title);
        } if (e.target.id === 'pointOne') {
            newTask.detail[0] = { point: e.target.value, pointMarked: false }
        } if (e.target.id === 'pointTwo') {
            newTask.detail[1] = { point: e.target.value, pointMarked: false }
        } if (e.target.id === 'pointThree') {
            newTask.detail[2] = { point: e.target.value, pointMarked: false }
        }
        newTask.id = new Date().getTime()

    }



    const handleSubmit = (e, id) => {
        e.preventDefault()
        newTask.date = startDate
        props.displayDetail(newTask.id)
        props.addNewTask(newTask)
        props.display('task')
        console.log(newTask);



    }
    const handleDate = (date) => {
        setStartDate(date)
    }


    return (
        <>
            <form onSubmit={handleSubmit} type='submit'>
                <input onChange={handleChange} id='newTask' type="text" />
                <label htmlFor="text">new task</label>
                <input onChange={handleChange} placeholder='optional' id='pointOne' type="text" />
                <label htmlFor="text">point one</label>
                <input onChange={handleChange} placeholder='optional' id='pointTwo' type="text" />
                <label htmlFor="text">point two</label>
                <input onChange={handleChange} placeholder='optional' id='pointThree' type="text" />
                <label htmlFor="text">point three</label>
                <DatePicker
                    selected={startDate}
                    onChange={date => handleDate(date)}
                    timeInputLabel="Time:"
                    dateFormat="MM/dd/yyyy h:mm aa"
                    showTimeInput
                    placeholderText="Click to select a date"
                />
                <button>ADD</button>
            </form >
        </>
    )
}
const mapStateToProps = (state) => {
    console.log(state);
    return {
        add: state,
        position: state.position
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        addNewTask: (newTask) => { dispatch({ type: 'ADD_NEW_TASK', newTask: newTask }) },
        displayDetail: (id) => { dispatch({ type: 'DISPLAY_DETAIL', id: id }) },
        display: (id) => { dispatch({ type: 'DISPLAY', id: id }) },
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Add)

 a tak jest w reducerze

 case 'ADD_NEW_TASK':
            return {
                ...state,
                todos: [...state.todos, action.newTask],
                selectedItem: { id: action.newTask.id },
            }

 

---

znalazłem to miejsce

 case 'EDIT_TASK':
            console.log(state.todos);
            console.log(action.id)
            const toEdit = state.todos.filter(each => {
                return each.id === action.id
            })

            const toNotEdit = state.todos.filter(each => {
                return each.id != action.id
            })
            console.log('notedit', toNotEdit);
            if (toEdit.length > 0) {
                toEdit[0].edit = true
            }
            else { toEdit[0] = null }
            console.log(toEdit);
            console.log(toEdit.length);
            return {
                ...state,
                todos: [...toNotEdit, toEdit[0]]
            };

wcześniej w else były puste nawiasy i było undefined, teraz w else jest to co powyżej i w tablicy jest jako trzeci null, pracuję na tym aby to usunąć :) tylko jak to zrobić?....

 

---

zrobiłem to tak, i undefined znikneło

const allTodos = state.todos.map(each => {
                if (each.id != action.id) return each; return { ...each, edit: true }
            })
            return {
                ...state,
                todos: [...allTodos]
                // todos: [...toNotEdit, toEdit[0]]
            };