0

オブジェクトをコンストラクターの状態に広げようとしている反応コンポーネントがあります。

constructor() {
    super()

    const shapesArray = [1, 2, 3]

    let renderStates = shapesArray.map((el, i) => {
        return {['shape'+i]: 'black'}
    })

    this.state = { ...renderStates }
    console.log(this.state)
}

を実行して色にアクセスしたいのですthis.state.shape0が、ログをコンソールに表示するthis.stateと、次のようになります。

ここに画像の説明を入力

の代わりにObject {shape0: "black", shape1: "black", shape2: "black"}。

ここで何が間違っていますか？

4

4 に答える 4

3

これは、Array を Object に展開しているためです。配列は、実際には (通常は) 連続する整数文字列をキーとして持つオブジェクトです。これらのキーは、配列のインデックスです。

以下に示すようにmap、配列を取り、別の配列を生成します

const shapesArray = [1, 2, 3];

const renderStates = shapesArray.map((el, i) => {
  return {
    ['shape' + i]: 'black'
  }
});

console.log(renderStates);

オブジェクトに展開すると、ソース オブジェクト内の独自の列挙可能な各プロパティの値が、それぞれのキーの下でターゲットに追加されます。配列のキーはそのインデックスであるため、配列の各要素のプロパティを持つオブジェクトになります。各プロパティの名前は、配列内のインデックスです。

目的を達成するために、 を使用Array.prototype.reduceして、マッピング プロセスで作成された名前を持つ配列からオブジェクトを作成できます。

const shapesArray = [1, 2, 3];

const renderStates = shapesArray
  .map((el, i) => {
    return {
      ['shape' + i]: 'black'
    }
  })
  .reduce((o, element) => {
    Object.keys(element).forEach(key => o[key] = element[key]);
    return o;
  }, {});

console.log(renderStates);

もちろんこれ自体もreduce内にオブジェクトを広げればよりエレガントに書けます。

const shapesArray = [1, 2, 3];

const renderStates = shapesArray
  .map((el, i) => {
    return {
      ['shape' + i]: 'black'
    }
  })
  .reduce((o, element) => ({...o, ...element}), {});

console.log(renderStates);

于 2017-05-13T20:10:44.800 に答える
0

renderStatesは、0 から始まる整数プロパティを持つ配列、または特定したい場合は配列インデックスを持つ配列であるため、{...renderStates}各インデックスを取得し、このインデックスからそのインデックスに対応する値へのマッピングを作成して、探しているものを実現します。renderStatesそのように配列をオブジェクトに減らす必要があります

let renderStates = shapesArray.map((el, i) => {
        return {['shape'+i]: 'black'}
    }).reduce((resultObj, currentShape,index) => resultObj['shape'+index] = currentShape['shape'+index]), { });

renderStatesはオブジェクトになりました。それを広げると、必要な結果が得られます

于 2017-05-13T20:10:51.883 に答える