[英]Component props not updating on state change
I'm having a component in React.我在 React 中有一个组件。 It's prop
group
should update when the state cloneMode
change.当状态
cloneMode
改变时,它的 prop group
应该更新。 For this I'm using the following code:为此,我使用以下代码:
Structure:结构:
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>
);
};
Parent:家长:
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>
);
};
When I run setCloneMode(true)
, it's not affecting the component.当我运行
setCloneMode(true)
,它不会影响组件。 Any thoughts on how can I achieve it?关于如何实现它的任何想法?
Without a codepen, any info about why you think the state isn't updating, or any more context it's difficult to answer your question but here is a list of things to try:如果没有代码笔,任何有关您认为状态未更新的原因的信息,或者任何其他上下文都很难回答您的问题,但这里列出了一些可以尝试的事情:
data-test={cloneMode}
.data-test={cloneMode}
看到它。key
prop from your DraggableElement
component.DraggableElement
组件中删除key
道具。 You don't need a key here.true
prop value for one of these to make 100% sure that the prop isn't working.true
道具值,以 100% 确定道具不起作用。First thing is, You're not changing the state (or forgot to write it down).第一件事是,你没有改变状态(或者忘记写下来)。 Without it we can't answer your question.
没有它,我们无法回答您的问题。
This is the default behavior of React.这是 React 的默认行为。
Component should rerender once the value of props or state is changed
. Component should rerender once the value of props or state is changed
。
So, download React Dev Tools which is a browser extension for Chrome or Edge which helps to see/change the value of props and state from chrome developer window in real time.因此,下载React Dev Tools ,它是 Chrome 或 Edge 的浏览器扩展程序,它有助于从 Chrome 开发人员窗口实时查看/更改道具和状态的值。 With this you'll get a better understanding of your Problem, and start to debug from there.
有了这个,您将更好地了解您的问题,并从那里开始调试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.