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

Question

我正在使用primereact生成表，我想实现ColToggle这是linkhttps://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);
});

请参阅代码中的映射函数。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 不知道重新渲染。

例如

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} .../>

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

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

Answer 4

@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} />;
});