Reactjs 如何使用Redux和React更新我的Todo

我基于redux的todolist中有一个问题，添加到todo和删除todo都有效，但我无法更新todo。我正在使用免疫助手，它正在更新列表中的下一项，有时返回未定义的对象

这是我的编辑

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { editTodo } from  '../../actions/editTodoActions'
class EditTodo extends Component {

    constructor(props){
        super(props)
        this.state = {
            id:this.props.match.params.id,
            todo:this.props.todo[0].todo
        }
    }

    onInputChange = (e) => {
       const todo = e.target.value;
       this.setState({
         todo : todo
       })
    }

    editTodo = (e) => {
        e.preventDefault()
        const todo = {
            id : this.state.id,
            todo: this.state.todo
        }
        this.props.editTodo(todo);
    }

    render() {
        const id = this.props.match.params.id
        console.log(this.props.todo)
        console.log(this.props.todo[0].todo)

        return (
            <div>
                <input className="todo" name="todo" onChange={this.onInputChange} value={this.state.todo} type="text" placeholder="enter todo" /> <br />
                <button onClick={this.editTodo}>Submit </button> 
            </div>
        )
    }
}

const MapStateToProps = (state,ownProps) =>({
    todo : state.todolist.filter((item) => item.id == ownProps.match.params.id)
})

const MapDispatchToProps = {
   editTodo : editTodo
}

export default connect(MapStateToProps,MapDispatchToProps)(EditTodo)

这是我的减速机：

import { ADD_TODO,EDIT_TODO, DELETE_TODO } from '../actions/types'
import update from 'immutability-helper'
const todolist = [
    { id :1, todo:"hello team"}
]

function todolistReducer(state=todolist,{ type, payload }){
        switch(type){
                case ADD_TODO:

                        let newTodo = { 
                                id: payload.todo.id, 
                                todo:payload.todo.todo
                        };
                         return state.concat([newTodo]);

                case EDIT_TODO:
                        console.log('edit todo called')
                        console.log(payload.todo.id)
                        return update(state, { 
                                  [payload.todo.id]: {
                                    todo: {$set: payload.todo.todo}
                                  }

                        });
                                // Now we know that foo is defined, we are good to go.
                case DELETE_TODO:
                        console.log('delete reducer called')
                 return  state.filter((item) => item.id != payload.id)

                default:
                return state

        }



}
export default todolistReducer

---

immutability helper

提供的

update

方法接受第二个参数键作为数组中需要更新的对象的

索引

在您的情况下，它不会工作或更新下一个对象，因为对象的id是从
1
开始定义的。理想情况下，在更新之前，您应该找到需要更新的对象的索引，然后使用相同的索引更新
todo
s数组中的对象

因此，我创建了一个实用程序来查找需要更新的对象的索引，然后调用
update
方法

export const todolist=[
{id:1，todo:“你好，团队”}，
{id:2，todo:“你好，第二队”}
]
const updateObj=（列表、id、值）=>{
让index=list.findIndex（todo=>todo.id==id）
如果（索引==-1）返回列表；
让updatedList=update（list，{
[索引]:{
todo:{$set:value}
}
})
返回更新列表；
}
log（updateObj（todolist，2，“更新值”））
log（updateObj（todolist，3，“更新值”））

在您的示例中，将以下内容替换为
EDIT_TODO
case，并使用上述
updateObj
实用程序

案例编辑\u待办事项：
console.log（'已调用编辑todo'）
console.log（payload.todo.id）
返回updateObj（状态，payload.todo.id，payload.todo.todo）；

下面是我创建的示例项目的示例。虽然它没有reducers实现，但是使用
immutability helper
s
update
方法根据您的需求更新对象

希望这有帮助。
您能告诉我您的错误是什么吗？唯一可以得到错误的情况是，找不到需要更新的对象的eat索引。很抱歉，缺少return语句。我已经更新了代码。请立即使用最新代码进行验证。
import { ADD_TODO,EDIT_TODO, DELETE_TODO } from '../actions/types'
import update from 'immutability-helper'
const todolist = [
    { id :1, todo:"hello team"}
]

function todolistReducer(state=todolist,{ type, payload }){
        switch(type){
                case ADD_TODO:

                        let newTodo = { 
                                id: payload.todo.id, 
                                todo:payload.todo.todo
                        };
                         return state.concat([newTodo]);

                case EDIT_TODO:
                        console.log('edit todo called')
                        console.log(payload.todo.id)
                        return update(state, { 
                                  [payload.todo.id]: {
                                    todo: {$set: payload.todo.todo}
                                  }

                        });
                                // Now we know that foo is defined, we are good to go.
                case DELETE_TODO:
                        console.log('delete reducer called')
                 return  state.filter((item) => item.id != payload.id)

                default:
                return state

        }



}
export default todolistReducer