反应：默认 state 未在 useContext 中设置为道具

Question

Hoping someone can help me here, I am trying to render a list of objects based on data coming from my useContext hook. but the initial state using useState is being set to an empty array when trying to set it to a value from useContext, There are 6 objects in the projects data coming in, however I initially only want to render 4: and so am splitting the objects when they are received:

const LIMIT = 4

const { projects } = useContext(PortfolioContext); - this gets set fine

const [list, setList] = useState(projects.slice(0, LIMIT)); - list is an empty array

This is the map function that returns my elements:

{list.map((project) => {... })} -- list is an empty array on first render

I have a function which allows me to render the other 2 objects when a button is clicked, this also works fine but shows only those 2 instead of adding to 4 that should already be displayed:

`const loadMoreProjects = () => {
        const newIndex = index + LIMIT;
        const newShowMore = newIndex < projects.length - 1;
        const newList = concat(list, projects.slice(index, newIndex));
        setIndex(newIndex);
        setList(newList);
        setMoreProjects(newShowMore);
      };`

Here is a link to the file in full: https://github.com/RossoMaguire/react-portfolio-website/blob/master/src/components/Projects/Projects.jsx

Here is a link to the data source: https://github.com/RossoMaguire/react-portfolio-website/blob/master/src/mock/data.js

Here is a demo (you can see under 'Projects' nothing shows up): https://frosty-yalow-d8b34e.netlify.app/

Thanks in advance: :)

Answer 1

I ended up just splitting my data to have a 'moreProjectsData' array with the rest of the objects and rendered that in a new component that displays when 'see more projects' is clicked:

https://github.com/RossoMaguire/react-portfolio-website/blob/master/src/components/Projects/MoreProjects.jsx