Código actualizado Constructor inicializado y filtro colocado y opciones de carga en el método de representación de clase. Sigue mostrando un error que dice que this.state.cars.filter no es una función.
import React, { Component } from 'react'; import AsyncSelect from 'react-select/async'; export default class Search extends Component { constructor(props) { super(props); this.state = { inputValue: null, cars: [] }; } componentDidMount() { fetch(url) .then(res => { this.setState(prevState => ({...prevState, cars: res})) }) } handleInputChange = (newValue) => { const inputValue = newValue.replace(/\W/g, ''); this.setState({ inputValue }); return inputValue; }; render() { const filterCars = (inputValue) => { return this.state.cars.filter((i) => i.label.toLowerCase().includes(inputValue.toLowerCase()) ); }; const loadOptions = ( inputValue, callback) => { setTimeout(() => { callback(filterCars(inputValue)); }, 1000); }; return ( <div> <AsyncSelect cacheOptions loadOptions={loadOptions} defaultOptions onInputChange={this.handleInputChange} /> </div> ); } }Código de ejemplo del archivo json del que estoy obteniendo datos
[{"make":"KIA","link":"\/images\/image.jpg"},{"make":"BMW","link":"\/images\/image.jpg"}]Hay un par de problemas aquí. Primero, debe declarar el estado dentro de un constructor, así que en lugar de declarar el estado de esa manera, haga lo siguiente:
constructor(props) { super(props) this.state = {inputValue: '', cars: []} } Entonces necesitas lidiar con state mutations . Cada vez que llama a setState , esencialmente le está dando un nuevo object al que establece el state . No reasignas las properties , devuelves un nuevo object .
Para resolver este problema de reasignación, ES6 introdujo el spread operator que no fue diseñado específicamente para tratar con mutaciones pero ayuda mucho.
Esencialmente, cuando quiera crear una copia de un objeto, no hace
let a = ben cambio lo haces
let a = {...b}Con este cambio, los cambios en A no se reflejarán en B. Entonces, haga una copia en lugar de un duplicado.
¿Cómo puedes usar esto para evitar la mutación de estado?
Cada vez que llame a setState , asegúrese de distribuir primero el resto del estado en el nuevo antes de realizar cualquier cambio de propiedad:
setState(prevState => ({...prevState, cars: res})) De esta manera, esencialmente no elimina el inputValue de su objeto de estado, lo que puede causar problemas indefinidos.
Volviendo al problema principal, su función filterCars está ubicada fuera de su clase y allí está tratando de acceder a this.state . Mueva la función filterCars dentro de la clase y su error se resolverá, pero si no resuelve los problemas de mutación, no funcionará como se esperaba.