2

我正在使用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'}
            ];

我怎样才能做到这一点？

4

4 回答 4

1

你可能正在寻找这个，

this.columns_multiselect = this.state.columnSelector.map(col => ({field: col.field, header: col.header}))
于 2020-02-11T08:11:07.873 回答
0

将您的映射更改为此

this.columns_multiselect = this.state.columnSelector.map((col) => {
    return {field: col.field, header: col.header};
});
于 2020-02-11T08:10:02.393 回答
0

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

问题解决了。我没有在下拉列表设置的新状态上生成列。

以前的：

        var columns = this.state.jsonData.rootHeader.map((col,i) => {
            return <Column key={i} field={col.field} header={col.header} sortable={this.state.isSortable} />;
        });

现在：

        var columns = this.state.cols.map((col,i) => {
            return <Column key={i} field={col.field} header={col.header} sortable={this.state.isSortable} />;
        });
于 2020-02-12T06:23:50.623 回答
0

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

例如

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

相反，试试这个

this.setState({
  columnOpts: this.state.columnSelector.map(col => ({
    label:col.header,
    value: { field:col.field, header: col.header }
    })
  )
})
...
<MultiSelect value={...} options={this.state.colOptions} .../>

每当对 state 进行更改时，react 都会相应地更新 dom。

.foreach在不相关的说明中，如果您不返回值，我建议使用循环而不是映射。无需分配额外的内存。

于 2020-02-11T08:16:47.017 回答