React useState перехватывает ошибку: аргумент типа 'xxx' не может быть назначен параметру типа 'SetStateAction <xx>' - PullRequest
1 голос
/ 05 ноября 2019

Я использую реагирующие перехватчики для обновления, но замечаю ошибку при setState.

Аргумент типа '{alertRules: any;} 'нельзя присвоить параметру типа' SetStateAction '. Литерал объекта может указывать только известные свойства, а «alertRules» не существует в типе «SetStateAction» .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 '. Литерал объекта может указывать только известные свойства, а «alertRules» не существует в типе «SetStateAction» .ts (2345)

1 Ответ

0 голосов
/ 05 ноября 2019

Краткий ответ : - Убрать фигурные скобки из оператора setAlertRules, так как это приводит к несоответствию между type из setAlertRules при определении и его использовании.

Это особенность ES6, известная как Сокращение литерала объекта .

Во время определения 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 ); 
...