React：道具更改时重新渲染组件答案

【问题标题】：React: Re-render component when prop changeReact：道具更改时重新渲染组件
【发布时间】：2021-07-13 13:36:06
【问题描述】：

为什么子组件在我使用 useState 时仅显示更新后的 prop 值？

例如：

当我使用任何随机值调用 setReRender() 时，它可以工作。

父组件（演示代码）：

import Child from './Child';
const Parent = () => {
    const [arr, setArr] = useState([]);
    const [reRender, setReRender] = useState(" ");
    return (
        <>
            {arr.map(client => {
                return(
                    <Child
                        setReRender={setReRender}
                        arr={arr}
                        firstName={client.firstName}
                        lastName={client.lastName}
                    />
                );
            })}
        </>
    )
}

只有在我拨打setReRender() 之后，屏幕上才会显示更新。
例如 - 它适用于 setReRender(Math.random() * 2)。

useEffect 应该监听更新或更改等，但我不知道它会与 useState 一起使用。

这是让父组件重新渲染自身的正确方法吗？

编辑：

抱歉，如果我的问题不够清楚，这是我第一次来这里。

【问题讨论】：

请在您的子组件中显示代码
你指的是什么更新？如果您忽略 hack setRerender，您希望发生什么 prop 更改？
感谢您的 cmets，谢谢。你可以看到我对@utsavojha95 的评论，我在其中描述了我想要实现的目标。

标签： javascript reactjs react-hooks jsx

【解决方案1】：

如果状态发生变化，组件会自动重新渲染，因此当您使用随机值调用它时，您正在更改组件的状态并且它正在重新渲染
你能描述一下你的程序想要做什么吗？

【讨论】：

你几乎回答了我的问题，谢谢。该程序显示假期。用户可以喜欢和不喜欢显示的每个假期。父组件使用 useEffect 从数据库中获取假期，子组件通过卡片表示每个假期，使用 CSS 设置样式。子组件通过 prop 从父组件接收“假期数组”。我想分别为用户显示“喜欢”和“不喜欢”图标以及每个假期的喜欢次数。所以我在子组件上操作数组，以便在屏幕上显示正确的结果。
很好，没问题，以后可以尝试添加更多代码，并可能使用在线 ide 链接到它，这样您就可以获得更好的答案，如果这是您想要的。