Question

对于React来说，我是一个新秀，这很可能是一个简单的问题，但这几乎让我疯狂。

代码如下：

import React, { Component } from 'react';

class Tile extends Component {
    constructor(props) {
        super(props);
        this.state = {
            priceLog: [],
            diff: 'equal'
        };
    }

    componentWillReceiveProps() {
        let log = this.state.priceLog;
        log = log.push(this.props.price);
        this.setState({ priceLog: log });
        console.log(this.state.priceLog);
    }

    render() {
        return (
            <div className="Tile">
                Company: {this.props.name}<br/>
                Price: {this.props.price}
                <div className={this.state.diff}></div>
                <button id={this.props.id}>Details</button>
            </div>
        );
    }
}

export default Tile;

渲染组件时得到"Unhandled Rejection (TypeError): log.push is not a function"。传递给组件的所有属性都是字符串。

Answer 1

除了@CD的答案之外，您不希望在指定的state方法之外直接操作setState。在这种情况下，您可以使用concat返回一个新数组并将其分配给状态变量。像这样的东西

this.setState({ priceLog: this.state.pricelog.concat(this.props.price)});

由于console.log是异步调用，因此您对setState的第二次调用可能无法提供所需的结果。如果要访问新的状态变量，则必须使用像这样的回调

 this.setState({
     priceLog: this.state.pricelog.concat(this.props.price)
 }, () => console.log(this.state.pricelog));

Answer 2

push返回数组的新长度，所以替换：

log = log.push(this.props.price);

使用：

log.push(this.props.price);

React.js .push（）不是函数

2 个答案: