Ошибка типа: show.visible не повторяется. Реагировать на хуки, состояние не обновляется - PullRequest
Новая
       55

Ошибка типа: show.visible не повторяется. Реагировать на хуки, состояние не обновляется

1 голос
/ 24 января 2020

Я использую функциональный компонент React для обновления состояния. Но я получаю ошибку. Моя цель состояла в том, чтобы после извлечения данных я сначала отобразил 10 данных, а затем использовал кнопку «Загрузить еще», после нажатия на кнопку отобразятся еще 10 данных. Кто-нибудь может мне помочь? 

import React, { useEffect, useState } from "react";
import axios from "axios";
import moment from "moment";
const Events = () => {
  const [events, setEvents] = useState({ data: [] });
  const [show, setshow] = useState({ visible: 6 }); // HERE IS MY SHOW STATE AND INITIAL VALUE IS 6. 

  useEffect(() => {
    fetchingData();
  }, []);

  const fetchingData = () => {
    axios
      .get("/events")
      .then(response => {

        setEvents({ data: response.data.data });
      })
      .catch(err => console.log(err));
  };


 const eventDates = events.data.reduce((acc, event) => {
    acc[event.id] = {
      startDate: moment(event.event_dates.starting_day),
      endDate: moment(event.event_dates.ending_day),
      image: event.description.images.map(img => img.url),
      name: event.name.en
    };
    return acc;
  }, {});

let sortedByStartDate = Object.keys(eventDates);
  sortedByStartDate.sort(
    (a, b) => eventDates[a].startDate - eventDates[b].startDate
  );

  return (
    <div>
      {sortedByStartDate.slice(0, show.visible).map((list, index) => { //IN HERE I USED SLICE METHOD AND CALLED MY INITIAL STATE BEFORE MAPPING.
        return (
          <div key={index}>
            <h1>{eventDates[list].startDate.calendar()}</h1>
            <div>
              <h2>{eventDates[list].name}</h2>
              <img src={eventDates[list].image} alt="images" />
            </div>
          </div>
        );
      })}
      <button
        onClick={() => setshow(() => [...show.visible, show.visible + 10])} //THIS IS THE BUTTON WHERE I WANT TO UPDATE THE STATE
      >
        loadmore
      </button>
    </div>
  );
};

export default Events;

1 Ответ

0 голосов
/ 24 января 2020

Вы должны просто использовать map и условие if для отображения количества записей, 

{sortedByStartDate && sortedByStartDate.length && sortedByStartDate.map((list, index) => { 
  if(index <= show){
    return (
      <div key={index}>
        <h1>{eventDates[list].startDate.calendar()}</h1>
        <div>
          <h2>{eventDates[list].name}</h2>
          <img src={eventDates[list].image} alt="images" />
        </div>
      </div>
    );
  }
})}

Сделать вас show заявить простой, 

const [show, setshow] = useState(6);

Что облегчит обновление состояния, 

<button onClick={() => setshow(s => s+10)}>
   loadmore
</button>
...