Question

遵循保持this.state不可变的正确标准

const name = this.refs.name.value; 
const names = [ ...this.state.names, name ]; 
//add new name to names array, and finally
this.setState({ names: names });

所以我试图了解setState试图在这做什么。用新更新的名称数组替换旧名称数组？

Answer 1

好{ names: names }只是简单的javascript对象，而setState所做的是将state names变为新状态，即更新后的数组。

Answer 2

您看到的是spread operator ...。在ruby中，我们有一些非常类似的splat操作符。 names成为将this.state.names和name的所有元素连接到一个新数组的结果。 setState({names: names})然后使用新的names属性更新组件的内部状态。

其中一个使用它的扩展数组，将它的元素用作函数调用的单独参数。

// Equivalent
console.log(...[1,2,3])
console.log(1,2,3)

// Usage in function definition
function asdf(qwer, ...uiop) {
  console.log('NICE', qwer, uiop)
}

asdf(1,2,3,4);

// a declarative replacement for this procedural code
function asdf2() {
  var qwer = arguments[0];
  var uiop = Array.prototype.slice.call(arguments, 1, arguments.size);
  console.log('UGLY', qwer, uiop);
}

asdf2(1,2,3,4)

注意JSX是一个syxntax扩展，可能没有最新的es5和es6功能。

Answer 3

我猜答案就在那里。数组中的单个冒号将数组值设置为对象。 facebook.github.io/react/docs/react-component.html#setstate

setState Array中单冒号的用途是什么

3 个答案: