反应：默认 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