时间戳

首页 > 解决方案 > 无法在功能组件中使用 useEffect 更新界面道具

reactjs - 无法在功能组件中使用 useEffect 更新界面道具

问题描述

  1. 我正在尝试更新channelInfo即将作为道具出现的内容。下面是它来自的界面。

    export interface GridChannelCellProps extends FocusViewInjectedProps {
  channel?: channelTile;
  channelInfo: GridGuideV5Channel | undefined; 
  listItemIndex?: number;
  testID?: string;
  backgroundColor?: string;
  fastScroll?: boolean

  2. 我将 channelInfo 保存在一个新常量中。

      const [channelDetails, setChannelDetails] = useState(channelInfo);

  3. 现在我将作为第二个参数传递channelInfo给它来更新它。useEffect

    useEffect(() => {
  setShowAltText(!channel?.image?.url);
  setChannelDetails(channelInfo => channelInfo);
}, [channel, channelInfo]);

我无法在 UI 中看到任何更新，因为我正在基于channelInfo.

  1. 同时，这正在重新加载页面，但我需要在不重新加载的情况下更新按钮。

标签： reactjsreact-hooks

解决方案

在以下声明中：

setChannelDetails(channelInfo => channelInfo);

您正在将 的当前状态值设置channelDetails为其先前的值。因此，保持相同的值并且不进行任何更新。

这在钩子文档的“功能更新”部分中进行了解释：useState

如果新状态是使用先前状态计算的，则可以将函数传递给 setState。该函数将接收先前的值，并返回一个更新的值。

您应该执行以下操作，这会将 的状态值设置为作为道具接收channelDetails的值：channelInfo

setChannelDetails(channelInfo);

推荐阅读