3个点实际上在这里做什么

Question

我看到一个 React 组件 state 如下所示：

class MyComp extends BaseComponent {
      constructor(props) {
        super(props);
        this.state = {
          selectedColumns: [],
          params: {
            offset: 0,
            sort_by: {}
          }
        }
        ...
      }
    }

那么这个react组件下面有一个方法getValue。在这个方法中 allParams 对象是使用扩展语法创建的。 IE。它传播方法参数 params，然后更新组件状态中的 params 对象。

getValue(params){
  const allParams = {
    ...this.state.params,
    ...params
  }
  this.setState((prevState) => {
    return {
      ...prevState,
      params: allParams
    }
  })
  ...
}

然后在 MyComp:

的子组件中调用如下

goNext() {
  const offset =  15 // IT IS NOT JSON, it is a value 15.
  this.props.getValue({
    offset
  })
}

我看到 setState 没问题，但是 allParams 创建正确吗？ params 不能是要与 ... 一起使用的对象 (json) 吗？我错过了什么吗？

在其他情况下，传播语法是这样使用的：

const ob1 = {foo: 123}; 
const ob2 = {bar: 234}; 
const merged = {...ob1, ...ob2}; 
console.log(merged) //Output: { foo: 123, bar: 234 }

但在我的情况下是：

const ob1 = {foo: 123}; 
const ob2 = 15; 
const merged = {...ob1, ...ob2}; 
console.log(merged) //Output: { foo: 123}, and ob2 is not assigned!

Answer 1

ES6 扩展运算符可用于对象 'spread' 它们的值到另一个对象中以创建该对象的克隆。它在概念上类似于使用 Object.assign

样本

const x = { a : 1 };
const y = {...x}; // y = {a:1} Equivalent to : const y = Object.assign({},x);
const z = {...x , b: 2} // z = {a:1,b:2} Equivalent to Object.assign({a:1},{b:2})
const w = {...x , a: 2} // w = {a:2} Equivalent to Object.assign({a:1},{a:2})
const p = {a:2, ...x} // p={a:1} Equivalent to using Object.assign({a:2},{a:1})

Handy link explaining this in the context of Redux

编辑：基于评论中的讨论：在您的 goNext 方法中，当发生这种情况时：

this.props.getValue({
    offset
})

您实际上正在创建这样一个对象 {offset:15}。所以当它在 getValue 中使用时，例如：

const allParams = {
    ...this.state.params,
    ...params
}

您实质上是用 15 覆盖了旧的偏移值并创建了一个新对象。所以从本质上讲，我们不是分布在 15 上，而是分布在 {offset:15}

上

3个点实际上在这里做什么

What does 3 dots actually do here

javascript

ecmascript-6

reactjs

spread-syntax