Question

我正在尝试实现一种配置功能，其中可以在组件之间共享数组对象。但是，我努力做到这一点，以致每当从对象中选择一个数组时，它都不会显示在使用该对象的其余组件中。

const initGestures = [
    { desc: 'Left swipe', id: 0, selectedBy: null },
    { desc: 'Right swipe', id: 1, selectedBy: null },
    { desc: 'Up swipe', id: 2, selectedBy: null },
    { desc: 'Down swipe', id: 3, selectedBy: null },
    { desc: 'Grab', id: 4, selectedBy: null },
    { desc: 'Pinch', id: 5, selectedBy: null }
]

就我而言，这是手势组件将使用的一组手势。

<Gesture    
    index={index}    
    gestures={this.state.gestures}    
    gesturePool={this.gesturePool} 
/>

我已经将一个函数传递给将要接收对象的组件，并更新了哪个组件正在使用哪个数组。

gesturePool = (gestureId, ownerId) => {
        //Copy of state
        const gestureList = this.state.gestures

        //Targeted gesture
        const targetGesture = this.state.gestures[gestureId]

        //Iterate through gestures to find if there are existing gestures mapped to owner ID
        //If so, set selectedBy of gesture to null
        gestureList.filter((gesture, index) => {
            if(gesture.selectedBy === ownerId) gestureList.splice(index, 1, {...gesture, selectedBy: null})
        })

        //Assign owner ID to new gesture ID
        gestureList.splice(gestureId, 1, {...targetGesture, selectedBy: ownerId})

        //Map updated list to state
        this.setState({gestures: gestureList})
 }

所选手势将通过传入的索引映射到选择该手势的组件。

<select className="custom-dropdown" id="gesture" onChange={this.onChangeHandler}>
    {
        gestures ? gestures.map((gesture) => {
        if(gesture.selectedBy === null || gesture.selectedBy === index) {
            return <option key={index} value={gesture.id}>{gesture.id}</option>
        }
        }) : null
    }
</select>

这最初是可行的，但是当安装了新的Gesture组件时，我收到一个错误，因为下拉值重复。

警告：遇到两个具有相同密钥1的孩子。密钥应该是唯一的，以便组件在更新过程中保持其身份。非唯一键可能会导致子代重复和/或被忽略-这种行为不受支持，并且可能在将来的版本中更改。

此问题的解决方法是什么？

Answer 1

<select className="custom-dropdown" id="gesture" onChange={this.onChangeHandler}>
    {
        gestures ? gestures.map((gesture,idx) => {
        if(gesture.selectedBy === null || gesture.selectedBy === index) {
            return <option key={idx} value={gesture.id}>{gesture.id}</option>
        }
        }) : null
    }
</select>

尝试一下。

我认为您应该使用另一个index作为唯一键

如何在ReactJS的组件之间共享数组的动态对象？

1 个答案: