Javascript 删除时出错：无法读取属性'；id'；未定义的

这是我的组件/待办事项列表..js

import React,{Component} from 'react';
import * as uuid from 'uuid';
import { render } from '@testing-library/react';


class TodoList extends React.Component{

    state={
        text:''
    }
    onChange=(e)=>{
        this.setState({
            text:e.target.value,
        })
    }
    onClick=()=>{
        const id =uuid.v4();
        this.props.addTodo(id,this.state.text)
    }

    onDelete=()=>{

       this.props.deteleTodo(this.props.todos.id)}

    render(){

        return(
            <div>
                <ul>
                    {this.props.todos.map((todo)=>(
                        <li key={todo.id}>{todo.text}

                        <button onClick={this.onDelete}>delete</button> 
                        </li>
                    )

                    )}
                </ul>

                    <input value ={this.state.text} onChange= {this.onChange}/>
                     <button onClick={this.onClick}> Add toto</button>
            </div>
        )

    }
}
export default TodoList

这是我的容器/todo-list.js

import {addTodo,deteleTodo} from '../actions/add-todo'

const mapStateToProps=(state)=>({
    todos:state.todos,
})
const mapDispatchToProps=(dispatch)=> 
{
    return{
    addTodo:(id,text)=>dispatch(addTodo(id,text)),
    deteleTodo:(id)=>dispatch(deteleTodo(id))
}
}
export default connect (mapStateToProps,mapDispatchToProps)(TodoList)

这是我的reducers索引和todos.js

export default (state =[],action)=>{
    switch (action.type){
        case 'ADD_TODO':
            return[...state, action.payload];
        case 'REMOVE_TODO':
            const newState=state.filter((todo)=>todo.id !== action.payload.id);
            return newState;
        default:
            return state;
    }
}

import {combineReducers} from 'redux'
import todosReducer from './todos'

export default combineReducers({
    todos:todosReducer,
})

更改为：

export default (state =[],action)=>{
   switch (action.type){
     case 'ADD_TODO':
        return {...state, action.payload};

---

看起来您需要将todo的ID传递给

onDelete（）

函数。比如：

{this.props.todos.map((todo)=>(
        <li key={todo.id}>{todo.text}
            <button onClick={() => this.onDelete(todo.id)}>delete</button> 
        </li>
    )
)}

---

哪一行导致错误？从这里开始，添加

console.log（）

调用以显示变量的值，这样您就可以了解发生了什么。THX，它仍然显示无法读取ID->>const newState=state.filter（（todo）=>todo.ID！==action.payload.ID）；

{this.props.todos.map((todo)=>(
        <li key={todo.id}>{todo.text}
            <button onClick={() => this.onDelete(todo.id)}>delete</button> 
        </li>
    )
)}

onDelete = (id) => { this.props.deteleTodo(id) }