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

项目场景：

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

技术描述：

• React Hooks
• TypeScript

子组件部分代码：

代码语言：javascript复制

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

代码语言：javascript复制

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

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

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

解决方案：

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

代码语言：javascript复制

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

typescript render state 解决方案

0 人点赞