React JS 道具没有更新答案

【问题标题】：React JS Props not updatingReact JS 道具没有更新
【发布时间】：2021-09-22 05:02:29
【问题描述】：

在下面的代码中，当我更改 pendingCount 的状态时，第一个 key prop 发生了变化，但中的那个没有。这是为什么呢？

         <div>
            <motion.p
                key={pendingCount}
                whileHover={{textDecoration:"underline"}}
                style={{cursor:"pointer"}}
                onClick={ ()=>{ render(<Pending key={pendingCount} data={AllPendingsData}/>) } }
                className="position-relative d-inline-block pe-3"
            >
                Pending Requests
                <span className="badge rounded-pill bg-dark ms-2">
                    {pendingCount}
                </span>
            </motion.p>
        </div>

我还想补充一件事，那就是当的 props 发生变化时，我想做的是重新渲染它。更改密钥道具是我在互联网上找到的建议方法之一，但它对我不起作用。那么对于功能组件有没有更好或首选的方法呢？

【问题讨论】：

您可以使用useState 设置是否被点击的值，然后使用useEffect 并添加该状态值作为依赖项，如果您尝试根据点击的值重新渲染组件.
onClick 回调在做什么？这不是在 React 中呈现 JSX 的正常方式。那个render是什么函数，能不能分享一个更完整更全面的代码示例？
其实问题中的代码属于侧边栏。我将在 body 中呈现的组件存储在一个状态中，并且 render 方法会更改该状态。所以当 onClick 被触发时，它会改变状态。我只想重新渲染或更新 Pending 组件。（注意：我不想为此使用 react-router）
React 状态更新是异步的，所以很容易出现同步问题。将 React 组件存储在组件状态也是反模式，只需存储内在数据并从中渲染 JSX。 AllPendingsData 最终是你想要存储和渲染的吗？您能否为您正在尝试做的事情提供更完整和全面的代码示例？
所以我更改了代码，而不是将组件存储在状态中，现在我使用 switch 语句并通过渲染方法存储一个对象，我在 switch 语句中使用该对象来渲染不同的组件。一切正常，但 props 的更改仍然不会导致它传递到的子组件中的任何重新渲染。

标签： reactjs react-props react-functional-component

【解决方案1】：

你使用道具还是状态？

为了测试你尝试使用状态

【讨论】：

这不是一个答案，顺便说一句，需要澄清的问题应该由 cmets 提出。
对不起，我不明白。我同时使用状态和道具，只是将该状态作为道具传递给子组件。

【解决方案2】：

正如 Drew Reese 提到的那样，问题出在 onClick 上。道具会导致更新，但仅当用户单击元素时。因此，我没有将数据作为道具传递，而是使用了 useContext 钩子来解决我的问题。

【讨论】：