React JSX 元素中的循环依赖

Question

我在作为道具传递的对象中创建循环结构时遇到问题。基本上，我使用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() 返回的对象中。有人可以向我解释这是为什么吗？

Answer 1

_owner 是 null 对应于 columns1，因为该数组已在 MyTable 组件之外声明。