Reactjs 删除数组中的项，并将视图与react和react redux状态同步

我想知道，当我删除数组中的项目时，如何获得正确的显示

目前，我有：

{replies.map((reply, indexReply) => {
return (
    <tr key={indexReply}>
        <td className="text-center">
            <input className="input-quick-reply-text" type="text" maxLength="20" defaultValue={reply.text} onChange={(e) => this.handleChangeText(e, indexReply)}/>
        </td>
        ...
        <td>
            <div className="text-right">
                <div className="circle-button remove-reply" onClick={() => this.deleteItem(indexReply)}>
                    <FontAwesomeIcon icon="minus"/>
                </div>
            </div>
        </td>
    </tr>
)
})}

在我国：

当我删除第二项测试2时，我会显示以下内容：

在我的州：

我怎样才能得到真实的渲染请测试1和测试3

在我的组件上，我有：

{replies.map((reply, indexReply) => {
return (
    <tr key={indexReply}>
        <td className="text-center">
            <input className="input-quick-reply-text" type="text" maxLength="20" defaultValue={reply.text} onChange={(e) => this.handleChangeText(e, indexReply)}/>
        </td>
        ...
        <td>
            <div className="text-right">
                <div className="circle-button remove-reply" onClick={() => this.deleteItem(indexReply)}>
                    <FontAwesomeIcon icon="minus"/>
                </div>
            </div>
        </td>
    </tr>
)
})}

在我的减速机中：

case SEQUENCES.REMOVE_REPLY :
        indexBucket = action.indexBucket;
        indexBlock  = action.indexBlock;
        indexReply  = action.indexReply;

        console.log(indexBucket, indexBlock, indexReply);

        return {
            ...state,
            buckets: state.buckets.map((bucket, i) => i === indexBucket ? {
                ...bucket,
                blocks: bucket.blocks.map((block, i) => i === indexBlock ? {
                    ...block,
                    messages: block.messages.map((message, i) => i === 0 ? {
                        ...message,
                        replies: [
                            ...state.buckets[indexBucket].blocks[indexBlock].messages[0].replies.slice(0, indexReply),
                            ...state.buckets[indexBucket].blocks[indexBlock].messages[0].replies.slice(indexReply + 1)
                        ]
                    } : message)
                } : block)
            } : bucket)
        };

---

我试图添加这个。forceUpdate；在我的deleteItem函数中，但我有相同的问题…

这就是为什么使用数组索引作为键是非常困难的

您正在使用数组索引作为表行中的键属性，这样，如果您有一个像[test 1，test 2，test 3]这样的数组，并且您更新了状态使其成为[test 1，test 3]，那么测试3的键属性仍然是索引1，因此React出于性能原因会使用键1而不是新的键1来呈现以前呈现的DOM元素。一个快速解决方法是转到

阅读调试代码的提示。