为 .map 创建一个计数器，该计数器在组件安装/卸载之间持续存在答案

【问题标题】：Create a counter for .map that persists across component mount/unmount为 .map 创建一个计数器，该计数器在组件安装/卸载之间持续存在
【发布时间】：2020-05-25 10:57:05
【问题描述】：

我有一个 React 组件被多次挂载/卸载。在组件中，我需要多个需要编号的 .map。

我似乎无法获得一个会在挂载/卸载期间持续存在的计数器，因此 .map 值将适当增加。我一直在尝试使用 React Hooks，但一直遇到“重新渲染过多”的问题

我的组件是：

    const url = `http://mysite.test/jsonapi/paragraph/lo_ec_ac/${props.id}`
    const [data,loading] = useFetch(url);
    const Ac = data.data;
    const [state,setState] = useState({counter:0});

    return(
        <Fragment>
        {loading ? ("Loading...") : (
            <Fragment>
                <tr>
                    <td colSpan="2">LO{props.LoNum} {Ac.attributes.field_lo}</td>
                </tr>
                <tr>
                    <td>
                        {Ac.attributes.field_pass.map((pass,index)=>
                            <div>{setState({counter:state.counter+1})}{state.counter}{Ac.attributes.field_pass}</div>
                        )}
                    </td>
                    <td>
                        {Ac.attributes.field_merit}
                    </td>
                    <td>
                        {Ac.attributes.field_dist}
                    </td>
                </tr>
            </Fragment>
        )}
        </Fragment>
    )
}

export default UnitAc

我将非常感谢任何关于如何完成这项工作的指示。

【问题讨论】：

您收到too many re-renders rerenders 错误，因为您无法在渲染中设置状态，因为它会在每次渲染时触发重新渲染，从而创建一个无限循环。如果我理解正确，您是否只希望每个字段都有一个从 1 开始的索引？这些索引应该保持不变还是从每次渲染的最后一次增加？
在返回渲染标记时不能使用setState。你到底想要什么？编号每个Ac.attributes.field_pass 值？
如果您只想渲染从 1 开始的递增数字，则可以使用 index+1。
该组件被多次挂载，因此每次挂载该组件时，Ac.attributes.field_pass 的映射都会重置为 1。我希望这些值继续增加，而不是在组件安装时重置。
@NickMcCurdy - 这正是我想要实现的目标

标签： javascript reactjs

【解决方案1】：

由于您已经拥有来自 map 的每个项目的 index，因此您不需要任何计数器状态，并且通过删除它也可以修复您的状态管理错误。

    const url = `http://mysite.test/jsonapi/paragraph/lo_ec_ac/${props.id}`
    const [data,loading] = useFetch(url);
    const Ac = data.data;

    return(
        <Fragment>
        {loading ? ("Loading...") : (
            <Fragment>
                <tr>
                    <td colSpan="2">LO{props.LoNum} {Ac.attributes.field_lo}</td>
                </tr>
                <tr>
                    <td>
                        {Ac.attributes.field_pass.map((pass,index)=>
                            <div>{index + 1}{Ac.attributes.field_pass}</div>
                        )}
                    </td>
                    <td>
                        {Ac.attributes.field_merit}
                    </td>
                    <td>
                        {Ac.attributes.field_dist}
                    </td>
                </tr>
            </Fragment>
        )}
        </Fragment>
    )
}

export default UnitAc

【讨论】：