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

Posted 2023-02-14

【中文标题】组件道具未在状态更改时更新

【英文标题】：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 正在改变。但是它叫什么名字呢？

【参考方案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% 确保道具不起作用。