Question

我将数据存储在 redux 中，然后再次从 redux 调用数据，我创建了删除和更新操作，但删除操作不会删除存储在 state 和我不知道是我忘记了什么，还是有其他问题。如果您能帮助我进行更新，谢谢

动作文件：

import { todoTypes } from '../constants/actionTypes';

const initialStateTodo = []

export const actions = ((state = initialStateTodo, action) => {
  switch (action.type) {
    case todoTypes.ADD:
        console.log('add todo', action.payload)
        return state.concat(action.payload)

    case todoTypes.DELETE:
        console.log('delete todo', action.payload)
        return state.filter((item) => item.id !== action.payload)

    case todoTypes.EDIT:
        console.log('update todo', action.payload)
        return state.map((item) => {
            if (item.id === action.payload.id) {
                return {
                    ...state,
                    item: action.payload.item
                }
            }
        })
    default:
        return state
   }
})

我的 jsx 文件：

import { Button } from '../partComponents/button'
import { actionCreatores } from '../redux/constants/addTodo'
import 'material-icons/iconfont/material-icons.css';


export const Todo = () => {

const auto_increment_id = (todos) => {
    const max = todos.reduce((maxId, todo) => Math.max(todo.id, maxId), -1);
    return max + 1
}


const dispatch = useDispatch()
const [todo, setTodo] = useState('');

const selector = useSelector((state) => state.todo)
console.log('selector', selector)

const add = () => {
    if (todo === '') {
        alert('add any value')
    }

    else {
        dispatch(actionCreatores.addTodo({
            id: auto_increment_id(selector),
            item: todo,
            status: 'todo'
        }));
        setTodo('')
    }
}

const handleDelete = (e) => {
    dispatch(actionCreatores.deleteTodo({
        id: e,
        item: todo,
        status: 'todo'
    }));
}

const handleChange = (e) => setTodo(e.target.value);

return (
    <div className="list__addTodo">
        <input
            name='todo'
            type='text'
            className='todo__input'
            placeholder='add todo'
            value={todo}
            onChange={(e) => handleChange(e)}
        />
        <Button
            buttonValue='Submit'
            buttonType='submit'
            buttonClass='todo__btn'
            buttonHandleClick={() => add()}
        />

        <ul className='list__item'>
            {selector.length > 0 && selector.map((item) => {
                return <li className='list__item--value' key={item.id}>{item.item}
                    <span onClick={() => handleDelete(item.id)} class="material-icons list__icon">delete</span>
                    <span class="material-icons list__icon">update</span>
                </li>
            })}
        </ul>
    </div>
)

}

Answer 1

删除操作中的过滤器中缺少

id：

case todoTypes.DELETE:
  console.log('delete todo', action.payload)
  return state.filter((item) => item.id !== action.payload.id)

反应 redux 中的删除操作不起作用

1 个答案: