reactjs - React useState hooks fel: Argument av typen 'xxx' kan inte tilldelas parametern av typen 'SetStateAction'

Jag använder React-hooks för att uppdatera, men märker ett fel när jag använder setState.

Argument av typen '{ alertRules: any; }' kan inte tilldelas till parametern av typen 'SetStateAction'. Objektliteral kan endast ange kända egenskaper, och 'alertRules' finns inte i typen 'SetStateAction'.ts(2345)

Här är min kod.

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);

felet är när tillståndet sätts

Argument av typen '{ alertRules: any; }' kan inte tilldelas till parametern av typen 'SetStateAction'. Objektliteral kan endast ange kända egenskaper, och 'alertRules' finns inte i typen 'SetStateAction'.ts(2345)

Svar #1

Kort svar :- Ta bort de krulliga parenteserna från setAlertRules-satsen, eftersom det leder till en inkonsekvens mellan type för setAlertRules vid definitionen och dess användning.

Detta är en funktion i ES6 känd som Object literal Shorthand.

Vid tidpunkten för att definiera alertRules är typen på setAlertRules SetStateAction< Alert [ ] >. Och du försöker ge det ett värde av typen {alertRules: any}, vilket leder till felet.

Värdet som skickas till alertRules är ett objekt med nyckeln alertRules och dess värde som en array av typen Alert.

Så, ta bort måsvingeparentesen eftersom den har omvandlats till något sådant

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

prova denna kod för uppdatering av alertRules.

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

Relaterade artiklar