【react hooks】属性作为useState 初始值，属性改变useState 不改变问题？

星宇大前端

发布于 2022-03-09 11:33:35

2.1K0

发布于 2022-03-09 11:33:35

文章被收录于专栏：大宇笔记

项目场景：

现在有一个Modal子组件，需要父组件控制显示隐藏，同时子组件也可以控制隐藏。

技术描述：

React Hooks
TypeScript

子组件部分代码：

interface DataHelperProps {
  visible: boolean;
  title: string;
}

const IndexPage: React.FC<DataHelperProps> = ({ visible, title }) => {
  const { TabPane } = Tabs;
  const { Search } = Input;
  const [modelVisible, setModelVisible] = useState(visible);
  debugger
  console.log(modelVisible);
  return (
    <Modal
      visible={modelVisible}
      title={title}
      width={900}
    >
    </Modal>
  );
};
export default IndexPage;

问题描述：

父组件点击按钮重新传入 visible 为 true，子组件并没有显示。

原因分析：

我打印下了 modelVisible

  const [modelVisible, setModelVisible] = useState(visible);
  debugger
  console.log(modelVisible);

发现visible 此时为ture ，界面也重新render了，但是modelVisible 为false。

也就是说useState并没有随着属性的改变重新赋值

解决方案：

监听下属性，当属性改变的时候，重新复制state 。缺点这样会多刷新一次

  useEffect(()=>{
    setModelVisible(visible)
  },[visible])

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

typescript

render

state

解决方案

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

【react hooks】属性作为useState 初始值，属性改变useState 不改变问题？

【react hooks】属性作为useState 初始值，属性改变useState 不改变问题？

项目场景：

问题描述：

原因分析：

解决方案：

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐