Reactの記法について【getDerivedStateFromProps】

Question

下記の記事の2. Compare Incoming Props to Previous Props When Computing Controlled Values
の部分に関する質問です。

https://reactjs.org/blog/2018/05/23/react-v-16-4.html#bugfix-for-getderivedstatefromprops

static getDerivedStateFromProps(props, state) {
  const prevProps = state.prevProps || {};
  // Compare the incoming prop to previous prop
  const controlledValue =
    prevProps.value !== props.value
      ? props.value
      : state.controlledValue;
  return {
    // Store the previous props in state
    prevProps: props,
    controlledValue,
  };
}

このようなコードが書かれていますが、最後のところの、

return {
    // Store the previous props in state
    prevProps: props,
    controlledValue,
  };

はなぜ、prevProps: props,とcontrolledValue,が２段で書かれていても問題なく動くのでしょうか。
このライフサイクルの仕様を見ると、
return のところでは

return {
  a: A
  b: B
}

のように入れる箱に対して、実際の値が１対１でなければならないように見えます。
しかし、controlledValueのところでは、controlledValueに対する箱が見当たりません。

ReactやRedux全般でこの記法(１対１になっていない)がある気がするのですが、これはどういうことなのでしょうか。（あくまでもある気がするだけです）

何卒よろしくお願いします。

Answer 1

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015

JavaScript の文法の話です。React は関係ありません。

return {
  // Store the previous props in state
  prevProps: props,
  controlledValue,
};

は、

return {
  // Store the previous props in state
  prevProps: props,
  controlledValue: controlledValue,
};

と同じ意味です。

Comments

[tomoharu]

あそういうことなんですね。。。すみません。勉強不足でした。ありがとうございます。