时间戳

首页 > 解决方案 > 为 .map 创建一个计数器，该计数器在组件安装/卸载之间持续存在

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

问题描述

我有一个被多次安装/卸载的 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

我将非常感谢有关如何使这项工作的任何指示。

标签： javascriptreactjs

解决方案

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

    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

推荐阅读