如何添加 setState 方法的属性类型答案

【问题标题】：How to add a proptype of a setState method如何添加 setState 方法的属性类型
【发布时间】：2020-06-02 23:04:31
【问题描述】：

我正在为我拥有的项目创建一个可重用的组件。该组件有一个 user 和一个 setUser 作为 props，如下例所示。

const UserComponent = ({ user, setUser }) => {

     const calcHandler = useCallback(() => {
        setUser(prevUser => {
             // ...some calculation
             return userCopy;
         });
     }, [setUser]);

     return (
         <div>
             ... some content
         </div>
     );
 };

如你所见，这个组件有一个计算一些操作的方法，叫做calcHandler，并且只有一个依赖。

这是 proptype 验证：

 UserComponent.propTypes = {
    user: PropTypes.shape({
        // some props
    }).isRequired,
    setUser: PropTypes.func.isRequired,
};

但是，对于道具 setUser，它必须像 setState 方法（来自 useState 挂钩）。因为我可以从中获取先前的值并防止向 useCallback 添加其他依赖项。

setUser(prevUser => //... some calculation);

我需要改进 prop setUser 的验证。它不仅仅是一个功能。有人知道怎么做吗？

【问题讨论】：

是什么让从useState 返回的函数与任何其他函数不同？我不确定那里有什么区别。
我可以将函数作为 arg 传递并从中获取之前的状态值
据我所知，prop-types 不支持函数参数验证。

标签： javascript reactjs react-props

【解决方案1】：

但是，对于道具 setUser，它必须像 setState 方法（一个来自 useState 钩子）。因为我可以得到以前的并防止向 useCallback 添加其他依赖项。

听起来你在寻找PropTypes.shape，但在寻找function

不幸的是没有这样的东西，唯一的选择是自定义验证器

此外，您必须找到一种方法来获取function parameters 及其返回值作为验证所需的值。

var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
var ARGUMENT_NAMES = /([^\s,]+)/g;
function getParamNames(func) {
  var fnStr = func.toString().replace(STRIP_COMMENTS, '');
  var result = fnStr.slice(fnStr.indexOf('(')+1, fnStr.indexOf(')')).match(ARGUMENT_NAMES);
  if(result === null)
     result = [];
  return result;
}

TaskManagerFollowUp.propTypes = {
  setUser: function(props, propName, componentName) {
    const prop = props[propName];

    if(!getParamNames(prop).length) { // doesnt take any param
      throw new Error('invalid function propType')
    }

  }
}

【讨论】：