从react中的json数据动态生成列表

Question

我正在使用primereact生成表，我想实现ColToggle这是link https://www.primefaces.org/primereact/#/datatable/coltoggle。由于我正在从JSON Server动态生成列，因此我想为ColToggle实现动态生成此下拉列表，因为我将从用户输入中获取api url到populate the dropdown：

let columns = [
            {field: 'vin', header: 'Vin'},
            {field: 'year', header: 'Year'},
            {field: 'brand', header: 'Brand'},
            {field: 'color', header: 'Color'}
        ]; 

这就是我想要做的：

fetch(this.state.apiURL)
            .then((response) => response.json())
            .then((findresponse) =>{
                this.setState({
                    columnSelector: findresponse.rootHeader
                });
                console.log(this.state.columnSelector);
                this.state.columnSelector.map((col) => {
                    return this.columns_multiselect = [{field: col.field, header: col.header}];
                })
                console.log(this.columns_multiselect);
            });

请参见代码中的Map函数。JSON link:http://myjson.com/1620im。

这应该是我的输出：

           [
                {field: 'vin', header: 'Vin'},
                {field: 'year', header: 'Year'},
                {field: 'brand', header: 'Brand'},
                {field: 'color', header: 'Color'}
            ]; 

我该怎么做？

Answer 1

您可能正在寻找这个，

this.columns_multiselect = this.state.columnSelector.map(col => ({field: col.field, header: col.header}))

Answer 2

将映射更改为此]

this.columns_multiselect = this.state.columnSelector.map((col) => {
    return {field: col.field, header: col.header};
});

Answer 3

您实际上没有使用此映射功能更新状态，因此react不知道要重新渲染。

Answer 4

在@Jadip回答之后，下拉列表已正确填充，但在取消选中下拉列表中的列时，它并未消失。