Удалите элемент из массива и синхронизируйте представление с состоянием «реагируй и реагируй»

Question

Хотелось бы узнать, как правильно отображать изображение при удалении элемента из массива.

В настоящее время у меня есть это:

в моем состоянии:

Когда я удаляю второй пункт «Тест 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>
)
})}

Моя функция в моем компоненте класса:

deleteItem = (indexReply) => {
    this.props.removeReply(this.props.indexBucket, this.props.indexBlock, indexReply);
};

В моем редукторе:

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)
        };

Я попытался добавить "this.forceUpdate ();"в моей функции deleteItem, но у меня та же проблема ...

Answer 1

Именно поэтому использование индексов массива в качестве ключа не рекомендуется .

Вы используете индекс массива как ключевую опору в строках таблицы, таким образом, если у вас есть массив наподобие ["test 1", "test 2", "test 3"], и вы обновляете состояние, чтобы оно стало ["test 1", "test 3"] пропуском keyдля "test 3" по-прежнему индекс 1, поэтому React отображает ранее отрисованные элементы DOM с ключом 1 вместо нового по соображениям производительности.Быстрое решение состоит в том, чтобы изменить <tr key={indexReply}> на <tr key={reply.text}>