React/TypeScript父子组件传递状态，子组件更新时报错如何解决

报错原因 #

你代码里的核心问题有两个：

1. 你只给子组件传递了visible这个布尔类型的状态值，没有传递修改该状态的方法，子组件无法直接修改父组件定义的状态
2. 你在子组件里把布尔类型的props.visible当成函数调用，布尔类型本身不存在调用签名，自然触发TypeScript类型报错。

修复步骤 #

1. 修改父组件，给子组件传递状态更新方法

父组件需要把用于更新visible的方法通过props传递给子组件，同时注意JSX只能返回单个根节点，需要用React.Fragment包裹同级元素：

import React from 'react';
import Child from '../components/Child';

const Parent: React.FunctionComponent = () => {
  const [visible, setVisible] = React.useState<boolean>(false);

  const toggle = () => {
    setVisible(!visible);
  };

  // 新增专门的隐藏方法，适配子组件点击Hide的需求
  const hide = () => {
    setVisible(false);
  };

  return (
    <>
      <button onClick={toggle}>toggle</button>
      {/* 给子组件传递hide方法 */}
      <Child visible={visible} hide={hide} /> 
    </>
  )
};

export default Parent;

2. 修改子组件，调整props类型定义和调用逻辑

子组件的接口需要新增接收的方法类型，同时在点击事件里调用传入的方法，而不是调用visible：

import React from 'react';

interface Icomments {
  visible?: boolean;
  // 新增hide方法的类型定义
  hide: () => void;
}

const Child: React.FunctionComponent<Icomments> = (props: Icomments) => {
  const handleClick = () => {
    // 调用父组件传入的hide方法更新状态
    props.hide();
  };

  return (
    <button onClick={handleClick}>Hide</button>
  )
}

export default Child;

如果你不想单独定义hide方法，也可以直接把setVisible传递给子组件，对应调整子组件的props类型为setVisible: React.Dispatch<React.SetStateAction<boolean>>即可。

内容的提问来源于stack exchange，提问作者Sole