小编Pat*_*rts的帖子

我有一个简单的反应组件,我相信有一个受控输入的形式:

import React from 'react';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
            </form>
        )
    }

    onFieldChange(fieldName) {
        return function (event) {
            this.setState({[fieldName]: event.target.value});
        }
    }
}

export default MyForm;

当我运行我的应用程序时,我收到以下警告:

警告:MyForm正在更改要控制的类型文本的不受控制的输入.输入元素不应从不受控制切换到受控制(或反之亦然).决定在组件的使用寿命期间使用受控或不受控制的输入元素

我相信我的输入是有控制的,因为它有一个值.我想知道我做错了什么？

我正在使用React 15.1.0

无论Object.assign和对象传播只能做一浅合并.

问题的一个例子:

// No object nesting
const x = { a: 1 }
const y = { b: 1 }
const z = { ...x, ...y } // { a: 1, b: 1 }

输出是你所期望的.但是如果我试试这个:

// Object nesting
const x = { a: { a: 1 } }
const y = { a: { b: 1 } }
const z = { ...x, ...y } // { a: { b: 1 } }

代替

{ a: …

例如,假设我想要一个ICar接口,并且所有实现都将包含该字段Year.这是否意味着每个实现都必须单独声明Year？简单地在界面中定义它不是更好吗？

我正在尝试为我的Redux项目创建一个深度复制映射方法,该方法将使用对象而不是数组.我读到在Redux中,每个州都不应该改变以前的状态.

export const mapCopy = (object, callback) => {
    return Object.keys(object).reduce(function (output, key) {

    output[key] = callback.call(this, {...object[key]});

    return output;
    }, {});
}

有用:

    return mapCopy(state, e => {

            if (e.id === action.id) {
                 e.title = 'new item';
            }

            return e;
        })

但是它没有深层复制内部项目所以我需要调整它:

export const mapCopy = (object, callback) => {
    return Object.keys(object).reduce(function (output, key) {

    let newObject = {...object[key]};
    newObject.style = {...newObject.style};
    newObject.data = {...newObject.data};

    output[key] = callback.call(this, newObject);

    return output;
    }, {});
}

这不太优雅,因为它需要知道传递了哪些对象.ES6中是否有一种方法可以使用扩展语法来深度复制对象？

我使用以下代码来获取唯一的数字:

let uniques = [ ...new Set([1, 2, 3, 1, 1]) ]; // [1, 2, 3]

但是,typescript报告跟随错误:类型"Set"不是数组类型. 我不是打字稿忍者,有人能告诉我这里有什么问题吗？

我对ES2015中的spread语法和rest参数感到困惑.任何人都能用适当的例子来解释它们之间的区别吗？

如果你有一个数组作为你的状态的一部分,并且该数组包含对象,那么通过更改其中一个对象来更新状态是一种简单的方法吗？

示例,从反馈教程中修改:

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: [
      { id: 1, author: "john", text: "foo" },
      { id: 2, author: "bob", text: "bar" }
    ]};
  },
  handleCommentEdit: function(id, text) {
    var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first();
    var updatedComments = ??; // not sure how to do this  

    this.setState({data: updatedComments});
  }
}

在ECMAScript规范的SpreadElement描述

SpreadElement[Yield]:
...AssignmentExpression[In, ?Yield]

这与Spread语法相同

扩展语法允许在可能需要零个或多个参数(用于函数调用)或元素(用于数组文字)的位置扩展数组表达式或字符串等可迭代的值,或者在零或更多的位置扩展对象表达式键值对(对象文字)是预期的.

句法

对于函数调用:

myFunction(...iterableObj);

Run Code Online (Sandbox Code Playgroud)

对于数组文字:

[...iterableObj, 4, 5, 6]

Run Code Online (Sandbox Code Playgroud)

在MDN文档中描述？

什么是SpreadElement和/或扩展语法的用例; 如果SpreadElement和传播语法不同,它们的具体方式有何不同？

PHP支持可变参数的扩展运算符.

在JavaScript中,您可以使用spread运算符来执行此操作:

var a = [1, 2];
var b = [...a, 3, 4];
console.log(b); // [1, 2, 3, 4]

但是,尝试在PHP中执行此操作:

$a = [1, 2];
$b = [...$a, 3, 4];
var_dump($b);die;

结果出现此错误:

解析错误:语法错误,意外'...'(T_ELLIPSIS),期待']'

在PHP中不允许使用这种方式使用扩展运算符吗？如果是这样,是否有同样优雅的方式来达到同样的效果？

我有两个数组,

const pets = ["dog", "cat", "hamster"]

const wishlist = ["bird", "snake"]

我要附加wishlist到pets,可以使用两种方法来完成,

方法1:

pets.push.apply(pets,wishlist)

结果如下: [ 'dog', 'cat', 'hamster', 'bird', 'snake' ]

方法2:

pets.push(...wishlist)

这也导致: [ 'dog', 'cat', 'hamster', 'bird', 'snake' ]

当我处理更大的数据时,这两种方法在性能方面是否存在差异？