Блог

Главная - Вопросы по программированию - Приложение React, Как вы отображаете и сортируете заголовки в массиве Api в алфавитном порядке

Приложение React, Как вы отображаете и сортируете заголовки в массиве Api в алфавитном порядке

#javascript #reactjs #api #frontend

Вопрос:

Привет, я пытаюсь сопоставить и отсортировать заголовки из API в React в алфавитном порядке. Я продолжаю получать .sort () — это не функция, и я не знаю, где сортировать мой массив. Я был бы рад некоторой помощи!!

 import React, {useState, useEffect}from 'react';
import fetchMovies from '../../services/Movie-api';

export default function Movies(){
    const [movies, setMovies] = useState("")

    async function getMovies(){
        const movieData = await fetchMovies()

        console.log(movieData)
        setMovies(movieData.data.data)
    }

    useEffect(() => {
        getMovies()
    },[])

    return ( 
        <>
            {movies ? (
                <div>
                    <div>{movies.map((m,idx) => {
                        return <div key={idx}>{m.title}</div>
                    })}  
                    </div>
                </div>
            ):( "loading...")}
        </>
    )
}

Комментарии:

1. вы уверены, что данные являются массивом, а не строкой? если да, то сортировка должна быть работой.

2. Вы пытаетесь перейти map через строку (ваше начальное состояние). Измените его на useState([]) . Добавьте условие, которое показывает что-то другое, если длина массива равна 0: например if (!movies.length) return <div /> .

3. Как сказал @Andy, вы должны добавить пустую [] скобку в useState и использовать сортировку, прежде чем переводить ее в состояние. movieData.data.data.sort(function (a, b) { return a.value - b.value; });

4. Поэтому я добавил в usestate([]) и ввел функцию сортировки, но мой массив все еще не был отсортирован. Сейчас он ничего с этим не делает :/

5. export default function Movies(){ const [movies, setMovies] = useState([]) async function getMovies(){ const movieData = await fetchMovies() console.log(movieData) setMovies(movieData.data.data.sort((a,b) => a - b)) }

Ответ №1:

получилось с этим работать!

 setMovies(movieData.data.data.sort((a, b) => a.title.localeCompare(b.title)))
Метки: ,