Question

我有一个标尺组件，当我点击它时，它通过在我的 redux商店中再添加1个来为我创建水平标尺线。到目前为止，我添加它们时没有问题，但是当我双击它们时我也希望删除这些规则，我通过操作将项目索引发送到我的 reducer ，我运行array.slice只删除我双击的规则。但无论如何，它只是为我提出了最后一条规则。

我知道在渲染组件时会发生这种情况，因为当我console.log还原器中的数组时，正确的元素会从中移除，但渲染方式不同。以下是我使用的代码：

我的标尺组件：

class Rulers extends Component {
    render() {
        const { mousePosition, wheelY, dragY, rulerHGuides } = this.props;

        const ruleH = rulerHGuides.map((ruleH, i)=><RuleH index={i} wheelY={wheelY} dragY={dragY} key={i} {...ruleH} /> )

        return (
            <div>
                <div className="rules">
                    { ruleH }
                </div>
                <div className="ruler-horizontal" onClick={e=>{ store.dispatch( actions.rulerHGuides({top: mousePosition.y}) ) }}>
                    <span className="mouse-follow-h" style={{transform: `translateX(${mousePosition.x}px)`}}></span>
                    <svg id="svgH" xmlns="http://www.w3.org/2000/svg"></svg>
                </div>
            </div>
        )
    }
}

export default connect(state=>{
    const { mousePosition, rulerHGuides } = state;
    return { mousePosition, rulerHGuides }
})(Rulers)

RuleH组件

class RuleH extends Component {
    constructor(props) {
        super(props)

        this.state = {
            rulezHDrag: 0,
            top: 0
        }
    }
    render() {
        const { wheelY, dragY, index, id } = this.props;
        const { rulezHDrag, top } = this.state;

        return (
            <DraggableCore onDrag={this.handleRuleH.bind(this)} enableUserSelectHack={false}>
                <span id={id} className="ruleH" style={{top, transform: `translate3d(0, ${(-wheelY) + dragY + rulezHDrag}px, 0)`}}
                    onDoubleClick={e=>{
                        store.dispatch( actions.removeRulerHGuide( index ) )
                        console.log(index);
                    }}
                ></span>
            </DraggableCore>
        )
    }
    componentDidMount() {
        this.setState({
            top: `${this.props.top - ((-this.props.wheelY) + this.props.dragY)}px`
        })
    }
    handleRuleH(e: MouseEvent, data: Object){
        const { rulezHDrag } = this.state;
        this.setState({
            rulezHDrag: rulezHDrag + data.deltaY
        })
    }
}

我的动作创作者：

// Ruler guides
// ==========================================
export const rulerHGuides = (hGuides) => {
    return {
        type: 'RULER_H_GUIDES',
        hGuides
    }
}
export const removeRulerHGuide = (index) => {
    return {
        type: 'REMOVE_RULER_H_GUIDE',
        index
    }
}

我的减速机：

export const rulerHGuides = (state = [], action) => {
    switch (action.type) {
        case 'RULER_H_GUIDES':
            return [
                ...state,
                action.hGuides
            ]
        case 'REMOVE_RULER_H_GUIDE':
            return [
                ...state.slice(0,action.index),
                ...state.slice(action.index + 1)
            ]
        default:
            return state;
    }
}

我尝试使用array.filters代替array.slice，但这不是问题，问题，无论它是什么，都发生在我的组件中，我正在映射我的rulerHGuides数组

Answer 1

请使用某种形式的唯一id，而不是使用索引，并在创建时将其分配给规则。当您使用索引作为React组件的键时，在删除项后，相同的索引将用作键，这会破坏重新呈现优化。

例如，拥有索引0, 1, 2, 3并删除2上的项目，您将留下0, 1, 2 - 在那里您可以看到删除了最后一个密钥，导致您所描述的问题。

在redux存储中切片数组总是会导致删除组件呈现

1 个答案: