javascript - Typescript: Type 'X' provides no match for the signature '(prevState: undefined): undefined

So I have a React Native application using TypeScript, with an error that's driving me crazy.

Basically, there is a Searchable List. It is initiated with an Array of values. Once the user types in a SearchBar, the initiated Array is filtered, returning an updated Array.

However, TypeScript gives me the error: Type '{ id: string; name: string; selected: boolean; }[]' provides no match for the signature '(prevState: undefined): undefined'.

I am confused because I don't know where this '(prevState: undefined): undefined'actually es from and why. Do you know what I am doing wrong here? Help will be much appreciated.

Here is the code:

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

So I have a React Native application using TypeScript, with an error that's driving me crazy.

Basically, there is a Searchable List. It is initiated with an Array of values. Once the user types in a SearchBar, the initiated Array is filtered, returning an updated Array.

However, TypeScript gives me the error: Type '{ id: string; name: string; selected: boolean; }[]' provides no match for the signature '(prevState: undefined): undefined'.

I am confused because I don't know where this '(prevState: undefined): undefined'actually es from and why. Do you know what I am doing wrong here? Help will be much appreciated.

Here is the code:

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

• javascript
• reactjs
• typescript
• react-native

Share Improve this question Follow asked Apr 15, 2020 at 10:10 RuntimeErrorRuntimeError 1,39088 gold badges2626 silver badges5050 bronze badges 2

• Not sure whether that will resolve the error but you should probably initialize choicesList (and thereby the state's array) to []. Also, not a Typescript expert, but aren't you supposed to state types when declaring vars and params? – user5734311 Commented Apr 15, 2020 at 10:13
• Please give a minimal reproducible example, that code seems very convoluted. Why do you use `${item.name.toUpperCase()}` on one line but the (simpler) equivalent query.toUpperCase() on the next, for example? And shouldn't the logic for including or excluding items reverse the parison, too? – jonrsharpe Commented Apr 15, 2020 at 10:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The problem is, you have set the choicesList as undefined. and getChoicesList is called on the first initialization of ponent but before that the state us being set where the choicesList is undefined.

Update the part of your code as

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)
}, []);

Now, you'll have the filteredChoicesList with data you need and you shouldn't have any pilation error. Another thing is, create an interface and replace any with that interface in the state and while defining.