Typescript: тип «X» не соответствует подписи «(prevState: undefined): undefined»

Question

Итак, у меня есть приложение React Native, использующее TypeScript, с ошибкой, которая сводит меня с ума.

По сути, существует список для поиска. Он начинается с массива значений. Когда пользователь вводит строку поиска, инициируемый массив фильтруется, возвращая обновленный массив.

Однако TypeScript выдает мне ошибку: Type '{ id: string; name: string; selected: boolean; }[]' provides no match for the signature '(prevState: undefined): undefined'.

Я запутался, потому что не знаю, откуда на самом деле этот '(prevState: undefined): undefined' и почему. Вы знаете, что я здесь делаю не так? Помощь будет высоко ценится.

Вот код:

const defaultChoices = [
  {
    id: '1',
    name: 'default',
    selected: false,
  },
];

let choicesList;

const getChoicesList = () => {
  if (listName === 'include') {
    choicesList = Object.values(includeChoices).map(choice => ({
      ...choice,
    }));
  } else if (listName === 'exclude') {
    choicesList = Object.values(excludeChoices).map(choice => ({
      ...choice,
    }));
  }
};

const [filteredChoicesList, setFilteredChoicesList] = useState(choicesList);

useEffect(() => {
  getChoicesList();
}, []);

useEffect(() => {
    let choices = defaultChoices;

    if (listName === 'include') {
      choices = includeChoices;
    } else if (listName === 'exclude') {
      choices = excludeChoices;
    } else {
      choices = defaultChoices;
    }

    const newChoices = choices.filter(item => {
      const itemData = `${item.name.toUpperCase()}`; // ignore Uppercase/Lowercase and make equal
      const textData = query.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });

    setFilteredChoicesList(newChoices); // error occurs for "newChoices"
  }, [effect]);

Answer 1

Проблема в том, что вы установили choicesList как неопределенное. и getChoicesList вызывается при первой инициализации компонента, но перед этим устанавливается состояние, при котором choicesList не определено.

Обновите часть вашего кода как

let choicesList: any[] = [];

const getChoicesList = () => {
  let data: any[] = [];
  if (listName === 'include') {
    data = Object.values(includeChoices).map(choice => ({
      ...choice,
    }));
  } else if (listName === 'exclude') {
    data = Object.values(excludeChoices).map(choice => ({
      ...choice,
    }));
  }
  return data;
};

const [filteredChoicesList, setFilteredChoicesList] = useState<any[]>(choicesList);

useEffect(() => {
  const updatedList = getChoicesList();
  setFilteredChoicesList(updatedList)
}, []);

Теперь у вас будет filteredChoicesList с нужными вам данными, и у вас не должно быть ошибок компиляции. Другое дело, создайте интерфейс и замените any на этот интерфейс в состоянии и при определении.