Question

React在我作为道具传递的对象中创建圆形结构时遇到问题。基本上，我使用react-bootstrap-table2来呈现数据表。此组件需要两个对象数组作为道具：columns和data。我正在创建并传递这些道具，但由于某种原因，它们包含圆形结构。在某个时候，将调用JSON.stringify并引发TypeError: Converting circular structure to JSON。以下示例显示了columns道具中出现的问题。我创建了一个硬编码的数组，并动态创建了一个数组以展示差异。 this.props.cols = ["2017","2018","2019"]

const columns1 = [
    {
        dataField: 'dataTopic',
        text: null
    },
    {
        dataField: '2017',
        text: 
            <div>
                <div>2016 – 2017</div>
            </div>
    },
    {
        dataField: '2018',
        text:
            <div>
                <div>2017 – 2018</div>
            </div>
    },
    {
        dataField: '2019',
        text:
            <div>
                <div>2018 – 2019</div>
            </div>
    }
];

class MyTable extends React.Component {

    static propTypes = {
        cols: PropTypes.array
    };

    constructor(props){
        super(props);

        this.getColumns = this.getColumns.bind(this);
        this.getRows = this.getRows.bind(this);
    }

    getColumns() {
        const columns = [
            {
                dataField: 'dataTopic',
                text: null
            }
        ];

        this.props.cols.forEach((year) => {
            columns.push(           
                {
                    dataField: year,
                    text: 
                        <div>
                            <div>{year - 1} – {year}</div>
                        </div>
                }
            );
        });

        return columns;
    }

    getRows(){
        //Do stuff
    }

    render() {
        console.log(columns1);
        console.log(this.getColumns());

        return (
            <div>
                <BootstrapTable keyField='dataTopic' columns={this.getColumns()} data={this.getRows()} />
            </div>
        );
    }
}

export default MyTable;

我将以下输出显示到控制台：

由于某种原因，除了JSX元素中的_owner属性外，其他所有内容都是相同的。如果展开_owner，则会发现递归发生的位置：

我了解到_owner用于跟踪React组件的父级，但是我不明白为什么它在columns1中而不是getColumns()返回的对象中为null 。有人可以向我解释为什么吗？

Answer 1

_owner是null的{{1}}，因为此数组已在columns1组件外部声明。

React JSX元素中的循环依赖

1 个答案: