对象文字值和 React.js

Question

假设有 2 个组件 Main 和 Card，Card 是 React.js 中 Main 的子组件。 Card 会将一个字符串值传递给 Main。因此卡片的主要状态将更新。

var Card= React.createClass({
...
this.props.updateName(loginVal.value); //pass in a 'string' to updateName()
...
});

var Main = React.createClass({
    getInitialState: function() {
        return {
            names: []
        };
    },
    updateName: function (loginVal) {
        this.setState({ 
            names: this.state.names.concat(loginVal) // I don't understand why using 'concat' works but not 'push'.
        });
    },
    render: function(){
        var cardArr = this.state.names.map(function(item){
            return ( <Card login={item} /> );
        });
        return (
            <div>
                <Form updateName={this.updateName} />
                {cardArr}
            </div>
        );
    }
});

我的问题是为什么 this.state.names.concat(loginVal) 在 this.state.names 是 empty array 且 loginVal 是 string 时有效。 [].concat('string') 只是对我来说没有意义。

Answer 1

push 添加提供的元素和 returns 数组的新长度，因此 this.state.names 将是一个数字。

concat 将提供的元素添加到新数组并 returns 它，因此 this.state.names 将是一个添加了新名称的数组。

Answer 2

[].concat(["string", "other string") 会将每个值推送到一个新的空数组。您也可以传递一个简单的字符串而不是数组，因为该方法已被覆盖以使其更加灵活。

push("string") 不起作用，因为它将 return 数组的新长度。但它会改变数组而不是创建一个新数组。

你可以使用这个：

this.state.names.push(value);
this.setState({
    names: this.state.names
});

对象文字值和 React.js

Object literal values and React.js

javascript

reactjs

object-literal