Блог

Главная - Вопросы по программированию - Как мне перебирать массив объектов в react

Как мне перебирать массив объектов в react

#arrays #reactjs #loops #object #next.js

Вопрос:

Я хочу просмотреть массив объектов в своем React коде. Я использую getStaticProps() для получения своих данных с поддельного онлайн API -сервера.

Я использую nextjs для своего кода. Как мне это сделать с for while помощью или с помощью любого из циклов?

 import Head from 'next/head'


export async function getStaticProps() {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos')
    const data = await res.json()

    return {
        props: { todos: data }
    }
}
//the getStaticProps runs before the component is rendered, fetches the data and waits for the data and pumps it into the component so the component can be rendered with the data inside it.

const Todos = ({ todos }) => {
    return (
        <>
            <Head>
                <title>To Do List</title>
            </Head>
            <div>
                <h1>To Do List</h1>
                {todos.map(todoList => (
                    <div key={todoList.id}>
                        <a><h3> 
                        {  todoList.title}

                        </h3> </a>
                    </div>
                ))}
            </div>
        </>
    );
}

export default Todos;

Ответ №1:

вы должны обрабатывать свой массив

     const Todos = ({ todos }) => {
    return (
        <>
            <Head>
                <title>To Do List</title>
            </Head>
            <div>
                <h1>To Do List</h1>
                {todos amp;amp; todos.length>0 amp;amp; todos.map(todoList => (
                    <div key={todoList.id}>
                        <a><h3> 
                        {  todoList.title}

                        </h3> </a>
                    </div>
                ))}
            </div>
        </>
    );
}

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

1. В моем API более 200 элементов. Как мне сделать так, чтобы в нем были перечислены только первые 50 пунктов

2. вы должны использовать разбиение на страницы для получения других данных с сервера. и когда вы получаете другие данные, вы добавляете новые данные к старым данным

3. Я не понимаю

Ответ №2:

вы можете использовать этот код

 const Todos = ({ todos }) => {
return (
    <>
        <Head>
            <title>To Do List</title>
        </Head>
        <div>
            <h1>To Do List</h1>
            {todos amp;amp; todos.length>0 amp;amp; todos.map((todoList,index) => (
                {index < 50 amp;amp; <div key={todoList.id}>
                    <a><h3> 
                    {  todoList.title}

                    </h3> </a>
                </div>}
            ))}
        </div>
    </>
);

}

Метки: