如何解决此错误：错误：渲染的钩子比上一次渲染时更多？答案

【问题标题】：How solve this error: Error: Rendered more hooks than during the previous render?如何解决此错误：错误：渲染的钩子比上一次渲染时更多？
【发布时间】：2020-09-30 01:34:45
【问题描述】：

我可以用钩子解决这个问题吗？

为什么它不能正常工作？

我开始使用REACT DND，但在我尝试对项目使用拖放操作后，一切都出错了。

我用作依赖项：

"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"node-sass": "^4.14.1",
“道具类型”：“^15.7.2”，
“反应”：“^16.13.1”，
"react-dnd": "^11.1.3",
"react-dnd-html5-backend": "^11.1.3",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
“反应脚本”：“3.4.1”，
“redux”：“^4.0.5”

已部署的项目 - hungry-tree.surge.sh

src/components/todos/createTodo.js

import React, { useRef } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { useDrag, useDrop } from "react-dnd";
import actions from "../../actions";

const ItemTypes = {
  CARD: "todo",
};

function createTodo(props) {
  const currTodos = props.todos();
  return currTodos.map((elem, index) => {
    const ref = useRef(null);

    const [{ isDragging }, drag] = useDrag({
      item: { type: ItemTypes.CARD, index },
      collect: (monitor) => ({
        isDragging: monitor.isDragging(),
      }),
    });

    const [, drop] = useDrop({
      accept: ItemTypes.CARD,
      hover(item, monitor) {
        if (!ref.current) {
          return;
        }
        const dragIndex = item.index;
        const hoverIndex = index;
        // Don't replace items with themselves
        if (dragIndex === hoverIndex) {
          return;
        }
        const dragTodo = props.thirdData[dragIndex];
        const todoStart = props.thirdData.slice(0, hoverIndex - 1);
        const todoEnd = props.thirdData.slice(hoverIndex);
        todoStart.splice(todoStart.indexOf(dragTodo), 1);
        todoEnd.splice(todoStart.indexOf(dragTodo), 1);

        const withoutTodos = [...todoStart, dragTodo, ...todoEnd];
        props.setThirdData(withoutTodos);

        item.index = hoverIndex;
      },
    });
    drag(drop(ref));
    return (
      <li key={index} ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
        <span
          className={`todos_block-text ${
            elem.isComplete ? "todos_block-text_done" : ""
          }`}
          onClick={() => props.onDoneTodo(elem.label)}
        >
          {elem.label}
        </span>
        <button
          className="todos_block-trash"
          onClick={() => props.onDeleteTodo(elem.label)}
        >
          x
        </button>
      </li>
    );
  });
}

createTodo.propTypes = {
  thirdData: PropTypes.array,
  setThirdData: PropTypes.func,
};

const mapStateToProps = (store) => {
  return {
    thirdData: store.thirdData.data,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    setThirdData: (data) => dispatch(actions.setThirdData(data)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(createTodo);

【问题讨论】：

您在循环中使用了钩子。如果循环大小发生变化，钩子就会被弄乱。这是一种不好的做法，不应有条件地使用钩子。

标签： javascript reactjs

【解决方案1】：

出现此错误是因为您在循环中使用了钩子。 Hooks 实现禁止这样做，您可以在此处找到更多信息：

enter link description here

因此，您可能需要将待办事项分隔在单独的组件中，以便在组件顶部使用钩子。

【讨论】：