问题

Props是不可变的,计数状态被声明为const,因此无论如何都不能重新分配值。

解决方案

父级应该/通常会知道它正在渲染什么。通常,人们会通过以下方式渲染一个数据数组 Array.prototype.map 在这里,您可以同时获得正在渲染的数组的长度 和 映射回调中的当前索引。

const Box = ({ index, total }) => (
  <div>
    Running Index: {index} of {total}
  </div>
);

例子:

const [boxData] = useState(initialState);

...

{boxData.map((data, index) => (
  <Box index={index + 1} total={boxData.length} />
));

如果你正在寻找更“自动化”的东西,那么你可以创建一个包装器组件来自动注入 index 和 total 道具。它首先克隆组件,然后注入额外的道具。

import { cloneElement, Children } from "react";

const BoxWrapper = ({ children }) =>
  Children.map(children, (child, index) =>
    cloneElement(child, {
      index: index + 1,
      total: Children.count(children)
    })
  );

现在你可以渲染孩子了 Box 组件:

<BoxWrapper>
  <Box />
  <Box />
  <Box />
</BoxWrapper>

演示