Javascript 在react redux中唯一地计算某些元素

我有一个react组件，它将加载第三方内容，因此需要索引。该索引基于位置属性，该属性是一个枚举，对于具有相同位置的每个组件，该属性将递增

例如：

位置a=索引a-1

位置b=索引b-1

位置a=索引a-2

我不想将计数器存储在函数或其他东西中，因为应用程序应该是无状态的，以避免在服务器端呈现时出现问题。因此，我尝试将计数器（需要不时重置）存储在redux中，但这导致了问题，因为动作的调度是异步的，并且我无法在呈现两个组件之间的某个位置增加索引。所以我总是得到所有位置的索引1，即使redux状态下的索引是递增的

const Mycomponent = (props) => {
    // this should avoid to update the position after the initialization
    const [positionCount] = useState(props.positionCount); 

    // this should update the counter but its fired too late so that the 2. component will get the same counter as the first one
    if (positionCount === props.positionCount) {
        props.increasePositionCounter(props.position);
    }

    ...
}

@编辑 位置由上面的部件给出，不应更改。但是根据已经渲染了多少具有相同位置的组件，我们需要一个不同的索引

增量的代码如下所示：

export function exampleReducer(state, action) {
    let newState;

    switch (action.type) {
        // ...
        case actions.INCREASE_COUNTER:
            newState = {
                ...state,
                counter: {
                    ...state.counter,
                    [action.payload.position]: state.counter[action.payload.position] + 1
                }
            };
            break;
        // ...
    }

    return newState;
}

当我用位置a渲染一个组件时，它应该得到索引a-1。现在我渲染另一个具有相同位置a的组件，它应该得到索引a-2，依此类推。然后我用另一个位置渲染另一个组件，比如说b，它应该得到索引b-1。但我不知道到目前为止，在哪里可以跟踪每个位置渲染了多少组件。 希望这有助于更好的理解

@Edit2:

---

我已经和第三方内容的开发者谈过了，他们告诉我另一种方式，我根本不需要索引。所以这个问题在我的案例中已经解决了。但如果有人知道如何解决这个问题，请随时发布

您可以简单地跟踪所有渲染子组件及其在您的状态中各自的位置和索引

这样，您就可以轻松检索具有特定位置的元素的最大使用索引或删除某些项：

//依赖项
const{render}=ReactDOM，
{createStore}=Redux，
{connect，Provider}=ReactRedux
//存储初始化
const defaultState={
儿童：[]
},
通知者=（状态=默认状态，操作）=>{
开关（动作类型）{
案例“追加子项”：{
const{children}=state，
{payload:pos}=操作
如果（！pos.length）返回状态
const maxIndex=Math.max（0，…子项）
.filter（（{position}）=>position==pos）
.map（（{index}）=>index）
)
返回{…state，children:[…state.children，{位置：pos，索引：maxIndex+1}]}
}
默认值：返回状态
}     
},
store=createStore（Appeducer）
//附加子组件
常量AppendChildForm=（{pos，onAppendChild}）=>{
返回(
（e.preventDefault（），onAppendChild（pos），e.target.reset（），pos=null）}>
子位置pos=event.target.value}>
附加子项
)
}
//附加子容器
var-mapDispatchToProps=dispatch=>（{onAppendChild:pos=>dispatch（{type:'APPEND\u CHILD'，payload:pos}）}）
const AppendChildContainer=connect（null，mapDispatchToProps）（AppendChildForm）
//子组件
const ChildComponent=（{position，index}）=>我的位置是{position}，我的索引是{index}
//父组件
常量ParentComponent=（{children}）=>(
{children.map（{index，position}，key）=>）}
)
//父容器
var mapStateToProps=（{children}）=>（{children:[…children]}）
const ParentContainer=connect（mapStateToProps）（ParentComponent）
//提供者
渲染(
,
document.getElementById（'root'））
)

---

您可以简单地跟踪所有渲染的子组件及其在您的状态中各自的位置和索引

这样，您就可以轻松检索具有特定位置的元素的最大使用索引或删除某些项：

//依赖项
const{render}=ReactDOM，
{createStore}=Redux，
{connect，Provider}=ReactRedux
//存储初始化
const defaultState={
儿童：[]
},
通知者=（状态=默认状态，操作）=>{
开关（动作类型）{
案例“追加子项”：{
const{children}=state，
{payload:pos}=操作
如果（！pos.length）返回状态
const maxIndex=Math.max（0，…子项）
.filter（（{position}）=>position==pos）
.map（（{index}）=>index）
)
返回{…state，children:[…state.children，{位置：pos，索引：maxIndex+1}]}
}
默认值：返回状态
}     
},
store=createStore（Appeducer）
//附加子组件
常量AppendChildForm=（{pos，onAppendChild}）=>{
返回(
（e.preventDefault（），onAppendChild（pos），e.target.reset（），pos=null）}>
子位置pos=event.target.value}>
附加子项
)
}
//附加子容器
var-mapDispatchToProps=dispatch=>（{onAppendChild:pos=>dispatch（{type:'APPEND\u CHILD'，payload:pos}）}）
const AppendChildContainer=connect（null，mapDispatchToProps）（AppendChildForm）
//子组件
const ChildComponent=（{position，index}）=>我的位置是{position}，我的索引是{index}
//父组件
常量ParentComponent=（{children}）=>(
{children.map（{index，position}，key）=>）}
)
//父容器
var mapStateToProps=（{children}）=>（{children:[…children]}）
const ParentContainer=connect（mapStateToProps）（ParentComponent）
//提供者
渲染(
,
document.getElementById（'root'））
)

---

在您创建的情况下，它绝对可以正常工作。但是如果您要自动执行onAppendChild并且一次执行多次