时间戳

首页 > 解决方案 > 每次切换时，Redux 复选框列表中的第二项都会发生变化

reactjs - 每次切换时，Redux 复选框列表中的第二项都会发生变化

问题描述

所以基本上未检查和检查现在在 redux 中工作，我已经在 api 请求上实现了它。但是当我单击复选框时的问题，下面的第二项也发生了变化。

我检查了 todo 因为它已经完成然后我检查的 todo 下面的 todo 也被检查了不知道为什么

下面的代码是完整的 todo 功能。我没有包括不完整的待办事项，因为它们都具有相同的逻辑并且它们在复选框方面都相同

单击以查看应用程序的图像

export default function CompletedTodos( { todos } ){
  const dispatch = useDispatch();
  const onToggle = useCallback(id => dispatch(incompleteTodo(id)), [dispatch]);
  const todoComplete = todos.filter(t => t.completed)
  return <Todos todos={todoComplete} completeTodo={onToggle} />;
}

const Todos = ({ todos, completeTodo }) => (
  <span>
    {todos.map((todo, index) => (
        <Todo key={index} {...todo} onClick={() => completeTodo(todo.id)} />
    ))}
  </span>
);

export default Todos;

const Todo = ({ onClick, id, completed, title }) => (
    <li className={`task-info ui-sortable-handle ${completed ? "line-through" : "none"}`} id="task17">
        {completed ? <CompleteTodo completed={true} onClick={onClick} /> : <IncompleteTodo id={id} completed={false} onClick={onClick} />}

        {title}
        <div className="clearfix"></div>
        <div className="mt-3">
            <p className="float-right mb-0 mt-2">
                <button type="button" className="btn btn-success btn-sm waves-effect waves-light">View</button>
            </p>
            <p className="mb-0">
                <a href="" className="text-muted"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="task-user" className="thumb-sm rounded-circle mr-2" /> <span className="font-bold font-secondary">Maya Didas</span></a>
            </p>
        </div>
    </li>
);

import React from "react";

const CompleteTodo = ({ onClick, completed }) => {
    return (
        <div className="checkbox checkbox-custom checkbox-single float-right">
            <input type="checkbox" aria-label="Single checkbox Two" onClick={onClick} defaultChecked={completed}/>
            <label></label>
        </div>
    );
}

export default CompleteTodo;

标签： reactjsredux

解决方案

感谢 Jayce444 对此的帮助。

回答 对于要更新的​​列表，切勿使用索引作为键。使用 todo.id，因为它是唯一标识符

推荐阅读