React useState 挂钩错误:“xxx”类型的参数不可分配给“SetStateAction<xx>”类型的参数

Posted

技术标签:

【中文标题】React useState 挂钩错误:“xxx”类型的参数不可分配给“SetStateAction<xx>”类型的参数【英文标题】:React useState hooks error: Argument of type 'xxx' is not assignable to parameter of type 'SetStateAction<xx>' 【发布时间】:2020-03-01 17:51:11 【问题描述】:

我使用 react hooks 来更新,但是 setState 时注意到错误。

' alertRules: any; 类型的参数' 不可分配给“SetStateAction”类型的参数。 对象字面量只能指定已知属性,而“SetStateAction”类型中不存在“alertRules”。ts(2345)

这是我的代码。

import React,  useState, useEffect  from 'react';
import  FieldArray  from 'redux-form';
import  CoordinateSelect  from '~/fields';
import lodash from 'lodash';
import  connect  from 'react-redux';
import  filterDispatchers  from '~/actions';
import t from '~/locale';

interface Props 
  getAlertRules(o: object): Promise<any>;

type Alert = 
  ...


const connector = connect(
  null,
  filterDispatchers('getAlertRules'),
);

const AlertRuleForm = (props: Props) => 
  const [alertRules, setAlertRules] = useState<Alert[]>([]);
  useEffect(() => 
    fetchData();
  , []);

  const fetchData = async () => 
    const actionResult = await props.getAlertRules( limit: -1 );
    const alertRules = lodash.get(actionResult, 'response.alertRules', []);
    setAlertRules( alertRules );    //Error form here
  ;

  const groupedRules = lodash.groupBy(alertRules, 'resourceType');
  const levelTypes = lodash.uniq(alertRules.map((alert: Alert) => alert.level));
  return (
    <FieldArray
      name="alertRules"
      component=CoordinateSelect
      label=t('告警规则')
      firstOptions=lodash.keys(groupedRules)
      secondOptions=groupedRules
      thirdOptions=levelTypes
      required
    />
  );
;
export default connector(AlertRuleForm);

错误是在设置状态时

' alertRules: any; 类型的参数' 不可分配给“SetStateAction”类型的参数。 对象字面量只能指定已知属性,而“SetStateAction”类型中不存在“alertRules”。ts(2345)

【问题讨论】:

我想知道你为什么使用花括号 setAlertRules( alertRules ); 我认为应该是 setAlertRules(alertRules); 因为你现在提供的对象是字段 alertRules 而不是数组 是的,正如@maciej Trojiniarz 所指出的,您需要删除花括号 【参考方案1】:

简短回答 :- 从 setAlertRules 语句中删除花括号,因为它会导致定义中的 typesetAlertRules 与其用法不一致。

这是 ES6 的特性,称为 Object literal Shorthand

在定义 alertRules 时,setAlertRules 的类型是 SetStateAction 。而您正试图为其赋予 alertRules: any 类型的值,这会导致错误。

传递给alertRules 的值是一个对象,其键为alertRules,其值为Alert 类型的数组。

所以,去掉花括号,因为它被转换成这个东西

 setAlertRules( alertRules: alertRules  ); 
  // now alertRules: any this thing will make sense 

尝试使用此代码更新 alertRules。

// see no curly braces .
 setAlertRules( alertRules ); 

【讨论】:

以上是关于React useState 挂钩错误:“xxx”类型的参数不可分配给“SetStateAction<xx>”类型的参数的主要内容,如果未能解决你的问题,请参考以下文章

提交值时如何在 React 挂钩中使用回调函数?

Firebase 和 React Hooks(useState 和 useEffect)

React useState导致渲染循环

如何在reactjs挂钩中创建自定义挂钩?

React useState:如何使用 onChange 输入和 OnClick 按钮更新我的 useState?

使用钩子时 Jest/Enzyme 测试抛出错误