TypeError: show.visible is not iterable. React hooks, state does not update

Question

我正在使用 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;

Answer 1

您应该只使用 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>

TypeError: show.visible is not iterable. React hooks, state does not update

TypeError: show.visible is not iterable. React hooks, state does not update

reactjs

react-hooks

react-state