為.map 創建一個計數器，該計數器在組件安裝/卸載期間持續存在

Question

我有一個被多次安裝/卸載的 React 組件。 在組件中，我需要多個需要編號的地圖。

我似乎無法獲得一個會在安裝/卸載期間持續存在的計數器，因此 .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

我將非常感謝有關如何使這項工作的任何指示。

Answer 1

由於您已經擁有map中每個項目的index ，因此您不需要任何計數器 state，並且通過刪除它也可以修復您的 state 管理錯誤。

    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