组件道具未在状态更改时更新答案

【问题标题】：Component props not updating on state change组件道具未在状态更改时更新
【发布时间】：2021-12-14 11:14:13
【问题描述】：

我在 React 中有一个组件。当状态 cloneMode 改变时，它的 prop 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) 时，它不会影响组件。关于如何实现它的任何想法？

【问题讨论】：

cloneMode 是DraggableElement 中的一个道具，你在哪里使用useState？我不清楚。
@Adam 很抱歉造成混乱！我已更新问题以包含父组件
你如何/在哪里打电话给setCloneMode(true)？
你能创建一个codesanbdox吗？
你能创建一个 codsandbox 链接吗，这里给出的代码 sn-p 道具没有改变，因为你提到 setCloneMode 正在改变。但是它叫什么名字呢？

标签： javascript reactjs use-state

【解决方案1】：

第一件事是，你没有改变状态（或者忘记写下来）。没有它，我们无法回答您的问题。

这是 React 的默认行为。 Component should rerender once the value of props or state is changed.

所以，请下载React Dev Tools，它是 Chrome 或 Edge 的浏览器扩展程序，有助于实时查看/更改 chrome 开发人员窗口中的道具和状态的值。有了这个，您将更好地了解您的问题，并从那里开始调试。

【讨论】：

【解决方案2】：

如果没有 codepen，任何关于您认为状态未更新的原因的信息，或者任何更多的上下文都很难回答您的问题，但这里有一个可以尝试的事情列表：

打开React Developer Tools 并确认状态/道具正在/没有更新。或者，您可以通过让 prop 成为数据属性的值来进行检查，以便您可以在检查器 data-test={cloneMode} 中看到它。
从DraggableElement 组件中删除key 属性。你在这里不需要钥匙。如果你打算在 React 的任何地方使用一个键，它应该是唯一的。您现在进行此设置的方式所有的键都将是 true 或 false。
如果所有其他方法都失败了，我会尝试为其中之一手动传递 true 道具值，以确保 100% 确保道具不起作用。

【讨论】：