Question

假设有两个组件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添加提供的元素并返回数组的新长度，因此this.state.names将是一个数字。

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

Answer 2

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

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

你可以用这个：

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

对象文字值和React.js

2 个答案: