Tengo este error cuando trato de cargar mi lista de juguetes:

Rechazo no controlado (TypeError): el envío no es una función reaccionar js

Cuando actualizo la página, muestra la lista por un momento y luego aparece el error. He estado buscando en Google durante horas y, sinceramente, no sé qué estoy haciendo mal. Mi objetivo es poder presionar un botón de clasificación y ordenar los juguetes alfabéticamente, y luego presionarlo nuevamente para mostrar los juguetes desordenados.

Si tiene algún consejo, por favor envíelo a mi manera. ¡Gracias!

 const ToyList = (props) => { const [toys, setToys] = useState([]); const [sortToys, setSortToys] = useState(false); const [startingToys, setStartingToys] = useState([]); // On launch we can save the inital order to state useEffect(() => { // Set the toys setToys(fetchToys()); // Save this ordering setStartingToys(toys); }, []); // Whenever sortToys changes, we can also change toys // thus re-rendering the list in the order you want useEffect(() => { if (sortToys) { setToys(toys.sort((a, b) => a.name.localCompare(b.name))); } else { setToys(startingToys); } }, [sortToys]); // Function to change the sort const handleSortChange = () => setSortToys(() => !sortToys); return ( <div> <div className="sortDiv"> <Button className="m-3" value="toy" onClick={handleSortChange}>Toys AZ</Button> </div> <div> </div> {props.toys.map(toy => <Container fluid> <Row> <Col key={toy.id}> <Card style={{ width: '17rem' }} className='text-center'> <Link to={`/toys/${toy.id}`}>{toy.name} <Card.Img variant='top' src={toy.image_url} alt="toyimage" width="300" height="300" /></Link> </Card> </Col> </Row> </Container> ) } </div> ) } export default ToyList

Mi acción fetchToys:

 export function fetchToys() { return (dispatch) => { fetch('http://localhost:3000/api/v1/toys') .then(response => response.json()) .then(toys=> dispatch({ type: 'FETCH_TOYS', payload: toys })) } }