切换状态采用先前的反应值？

Question

我正在尝试创建一个待办事项列表应用程序。基本功能包括添加和删除。所以当用户选择一个或多个项目时，会出现一个删除按钮，将其删除。我的问题是我正在实现一个切换状态，当用户点击待办事项时，它将被删除线（删除线文本装饰将通过 CSS 添加）。当我添加两项时，问题就出现了。当我点击第一个项目时，它会被删除，当我删除它时，第一个会消失，但 第二个项目这次会被删除。

The running sample in codesandbox。只需尝试添加两项并删除第一项。第二个也获得了删除线。

我相信这是因为切换状态值被记住了。

这是Content.js组件

import "./styles/content.css";
import Individual from "./Individual";
import { useEffect, useState } from "react";
import { updateItem, markIncomplete } from "./action/action";
const Contents = (props) => {
  const items = useSelector((state) => state.todoReducer.items);

  const dispatch = useDispatch();
  const handleClick = (e, isComplete, content, id) => {
    // console.log(isComplete);

    if (isComplete === false) {
      //evaluates false to true
      const newobj = {
        isComplete: true,
        content,
        id
      };

      dispatch(updateItem(newobj));

      props.deletebutton(true);
    } else {
      const falseobj = {
        isComplete: false,
        content,
        id
      };

      dispatch(markIncomplete(falseobj));
    }
  };


  useEffect(() => {
    console.log("statechanging of contents");
  });
  return (
    <div className="content-ui">
      <div>
        {items.map((vals) => (
          <Individual
            vals={vals}
            deletebutton={props.deletebutton}
            handleClick={handleClick}
          />
        ))}
      </div>
    </div>
  );
};

export default Contents;

这是处理切换功能的individual.js

import { useDispatch, useSelector } from "react-redux";
import "./styles/content.css";
import { updateItem, markIncomplete } from "./action/action";
const Individual = (props) => {
  console.log("child" + props.vals.isComplete);
  const [toggle, isToggled] = useState(false);
  const handleToggle = () => {
    const mytoggle = !toggle;
    isToggled(mytoggle);
  };
  return (
    <div>
      <div
        className={toggle ? "toggled" : "card-elements"}
        onMouseDown={handleToggle}
        onClick={(e) => {
          props.handleClick(
            e,
            props.vals.isComplete,
            props.vals.content,
            props.vals.id
          );
          handleToggle;
        }}
      >
        {props.vals.content}
      </div>
    </div>
  );
};
export default Individual;

切换器

Css

.toggled {
  /* border: 1px solid rgb(94, 94, 94); */
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  text-align: left;
  box-sizing: border-box;
  padding: 10px 3px 10px 7px;
  margin-top: 4px;
  margin-bottom: 8px;
  border-radius: 5px;
  background-color: white;
  font-size: 12px;
  font-family: "Roboto ", monospace;
  text-decoration: line-through;
}
.card-elements {
  /* border: 1px solid rgb(94, 94, 94); */
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  text-align: left;
  box-sizing: border-box;
  padding: 10px 3px 10px 7px;
  margin-top: 4px;
  margin-bottom: 8px;
  border-radius: 5px;
  background-color: white;
  font-size: 12px;
  font-family: "Roboto ", monospace;
}

Answer 1

您需要为映射的项目添加键（控制台中也应该有关于此的警告）。

Keys help React identify which items have changed, are added, or are removed.

如React's documents所述。

return (
    <div className="content-ui">
      <div>
        {items.map((vals) => (
          <Individual
            key={vals.id} // <-- add unique key
            vals={vals}
            deletebutton={props.deletebutton}
            handleClick={handleClick}
          />
        ))}
      </div>
    </div>
  );

切换状态采用先前的反应值？

Toggle state taking previous value in react?

html

javascript

reactjs

react-redux