反應：默認 state 未在 useContext 中設置為道具

Question

希望有人可以在這里幫助我，我正在嘗試根據來自我的 useContext 掛鈎的數據呈現對象列表。 但是使用useState的初始state在嘗試將其設置為useContext中的值時被設置為空數組，項目數據中有6個對象進入，但我最初只想渲染4個：所以正在拆分對象收到時：

const LIMIT = 4

const { projects } = useContext(PortfolioContext); - 這設置得很好

const [list, setList] = useState(projects.slice(0, LIMIT)); - 列表是一個空數組

這是返回我的元素的 map function：

{list.map((project) => {... })} -- list 在第一次渲染時是一個空數組

我有一個 function 允許我在單擊按鈕時渲染其他 2 個對象，這也可以正常工作，但只顯示那些 2 而不是添加到應該已經顯示的 4：

`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);
      };`

這是完整文件的鏈接： https://github.com/RossoMaguire/react-portfolio-website/blob/master/src/components/Projects/Projects.jsx

這是數據源的鏈接： https://github.com/RossoMaguire/react-portfolio-website/blob/master/src/mock/data.js

這是一個演示（您可以在“項目”下看到沒有顯示）： https://frosty-yalow-d8b34e.netlify.app/

提前致謝： ：）

Answer 1

我最終只是將我的數據拆分為具有對象的 rest 的“moreProjectsData”數組，並將其呈現在單擊“查看更多項目”時顯示的新組件中：

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