React дает мне TypeError: props.posts.map не является функцией при попытке отобразить массив сообщений

Question

Я пытался написать какой-нибудь простой код React для извлечения данных из фиктивного API и отображения их на странице.Но когда я пытаюсь отобразить мой массив сообщений, возвращаемых axios из асинхронной функции, это выдает мне ошибку.

Я попытался установить переменную props.posts, но она все еще не работает.

Вот структура моего приложения и функция, которую я использую для получения пользователей из API в виде JSON:

function App() {
    // Hook that declares a posts state
    const [posts, setPosts] = useState([])

    useEffect(() => {
        getPosts().then(setPosts)
    }, [])
    return (
        <div className='App'>
            <header className='App-header'>
                <PostList posts={posts} />
            </header>
        </div>
    )
}

function PostList(props) {
    return (
        <ul>
            {props.posts.map(post => (
                <Post post={post} />
            ))}
        </ul>
    )
}

function Post(props) {
    return <li>{props.post.title}</li>
}

async function getPosts() {
    try {
        let posts = await axios.get(
            'https://jsonplaceholder.typicode.com/posts'
        )
        console.log(posts)
        return posts
    } catch (error) {
        console.error(error)
    }
}

И это проблемный бит:

function PostList(props) {
    return (
        <ul>
            {props.posts.map(post => (
                <Post post={post} />
            ))}
        </ul>
    )
}

Я ожидаюприложение для отображения через массив сообщений, но каждый раз выдает ошибку.

Answer 1

Попробуйте добавить троицу для атрибута posts, если post не является массивом:

return (
    <div className='App'>
        <header className='App-header'>
            <PostList posts={posts && posts.length > 0 ? posts : []} />
        </header>
    </div>
)

Answer 2

Axios возвращает объект с информацией о запросе (статус, заголовки, данные и т. Д.). Я думаю, вам нужно найти request.data.Ошибка в том, что вы пытаетесь отобразить объект вместо массива.

 async function getPosts() {
    try {
        let posts = await axios.get(
            'https://jsonplaceholder.typicode.com/posts'
        )
        return posts.data 
               ˆˆˆˆˆˆˆˆˆˆ
    } catch (error) {
       ...
    }
}

документы: https://github.com/axios/axios

Answer 3

Наиболее вероятный сценарий: по какой-то причине ваш запрос axios терпит неудачу. Возможно, есть ошибка или проблема с CORS, и posts не является массивом, когда вы его устанавливаете. У вас должна быть некоторая проверка либо в вашем useEffect, либо в getPosts(), например:

async function getPosts() {
    try {
        let posts = await axios.get(
            'https://jsonplaceholder.typicode.com/posts'
        )
        if (!Array.isArray(posts)) {
          console.log("posts isn't an array: ", posts);
          return [];
        }
        return posts;
    } catch (error) {
        console.error('An error occurred: ', error);
        return [];
    }
}

Просто убедитесь, что даже в случае ошибки вы всегда возвращаете массив.