特定のインデックスでオブジェクトを配列に挿入する

Question

私はこのコンポーネントの状態である 'データ'配列の特定のポイントにオブジェクトを追加しようとしています。以下は機能しません、配列は単に空になります。

addNewBulletAfterActive =() => { 
    const array = this.state.data; 
    const newBulletPoint = { 
     id: this.state.data.length += 1, 
     title: 'Click to add' 
    }; 
    const newData = array.splice(this.state.activeBulletPointId, 0, newBulletPoint); 
    this.setState({ 
     data: newData 
    }); 
} 

アイデアは、私が10箇条書きのリストを持っている場合、ユーザは、第四の箇条書きをクリックすると、プレスが直接後の新しい箇条書きを追加するために入力することです。配列の最後に項目を追加する際に問題はありませんでしたが、.spliceが問題を引き起こしているようです。

Answer 1

spliceはスプライスされたアイテム（スプライスされた0アイテムなので空です）を元の配列に戻します。

const newData = array.slice(0); // copy 

newData.splice(this.state.activeBulletPointId, 0, newBulletPoint); 

this.setState({ 
    data: newData 
}); 

Answer 2

私はこれがあなたが何をしているのかを考えるべきです。

function addAfter(array, index, newItem) { 
    return [ 
     ...array.slice(0, index), 
     newItem, 
     ...array.slice(index) 
    ]; 
} 

この関数は、新しい項目が中央に挿入された新しい配列を返します。オリジナルの配列を変更することはないので、コンポーネントの状態とReduxでうまくいくでしょう。

この関数からの出力を自分の状態に割り当てることができます。