组件属性未在状态更改时更新。

Question

我正在使用React中的一个组件。当状态cloneMode更改时，它的group属性应该更新。为此，我正在使用以下代码：
结构：

const DraggableElement = ({ list, setList, cloneMode }) => {
 return (
    <ReactSortable
      group={
        cloneMode
          ? { name: "tasks_group", pull: "clone" }
          : "tasks_group"
      }
      key={cloneMode}
      list={list}
      setList={setList}
      animation={200}
      delay={1}
      className="task-child_drag"
    >
      {list.map((e) => {
        return <TaskItem key={e._id} task={e} />;
      })}
    </ReactSortable>
  );
};

父元素：

const Tasks = () => {
  const [cloneMode, setCloneMode] = useState(false);

  return (
    <div className="tasks">
            <DraggableElement
              list={todo}
              setList={setTodo}
              cloneMode={cloneMode}
            />
            <DraggableElement
              list={inProgress}
              setList={setInProgress}
              cloneMode={cloneMode}
            />
            <DraggableElement
              list={done}
              setList={setDone}
              cloneMode={cloneMode}
            />
          </div>
  );
};

我运行setCloneMode(true)时，它没有影响到组件。你有什么想法如何实现它呢？

- Ajit Kumar

---

你能测试一下设置 "tasks_group" 和 { name: "tasks_group", pull: "clone" } 在没有克隆模式的情况下是否正常工作吗？你能够手动更改组属性并确保 ReactSortable 正常工作吗？ - nima

@nima 我测试过了，不需要使用cloneMode也能正常工作。 - Ajit Kumar

如果你硬编码它们，使用 group={{ name: "tasks_group", pull: "clone" }} 和 group={"tasks_group"} 都能正常工作，我是这个意思。 - nima

你能创建一个代码沙盒吗？ - nima

你能创建一个 CodeSandbox 链接吗？这里给出的代码片段中，props 没有像你提到的那样被更改，而是 setCloneMode 被更改了。但是它在哪里被调用了呢？ - Sooraj Jose

Answer 1

没有提供 Codepen 或更多关于为什么状态不更新的信息和上下文，很难回答这个问题，但是以下是一些尝试的方法：

1. 打开React Developer Tools并确认状态/属性是否正在更新。或者，您可以通过将 prop 变成数据属性的值来检查，以便在检查器中查看它 data-test={cloneMode}。
2. 从您的 DraggableElement 组件中删除 key prop，因为这里不需要 key。如果你要在 React 中使用 key，它应该是唯一的。现在你的设置方式会导致所有的键都是 true 或 false。
3. 如果其他方法都失败了，我会尝试手动传递一个 true prop 值，以确保 prop 不起作用。

- iicaptain

Answer 2

首先，您没有改变状态（或忘记记录它）。没有状态我们无法回答您的问题。

这是React的默认行为。组件应该在props或state的值更改后重新渲染。

因此，请下载React Dev Tools，这是Chrome或Edge的浏览器扩展程序，可帮助您实时查看/更改chrome开发人员窗口中props和state的值。有了这个工具，您将更好地理解您的问题，并从那里开始调试。

- Pradip Dhakal