在反应中从json数据动态生成列表
Posted
技术标签:
【中文标题】在反应中从json数据动态生成列表【英文标题】:Dynamically generate list from json data in react 【发布时间】:2020-05-26 14:01:40 【问题描述】:我正在使用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'
];
我该怎么做?
【问题讨论】:
你的错误是什么?如果您使用的是服务,那么您的响应是怎样的?您想从响应中生成对象吗? 参见 Coltoggle 上面的链接,所有内容都写在硬编码的构造函数中。我想动态生成将被填充的列表。我希望这个列表由 json 数据生成。请查看 json 数据。我已经提供了链接。 抱歉,由于站点受限,我无法打开链接 【参考方案1】:@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 />;
);
【讨论】:
【参考方案2】:您实际上并没有使用此映射函数更新状态,因此 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
循环而不是 map。无需分配额外的内存。
【讨论】:
在值和标头之后的“:”中引发错误。 ' ; ' 预期的【参考方案3】:你可能正在寻找这个,
this.columns_multiselect = this.state.columnSelector.map(col => (field: col.field, header: col.header))
【讨论】:
【参考方案4】:将您的映射更改为此
this.columns_multiselect = this.state.columnSelector.map((col) =>
return field: col.field, header: col.header;
);
【讨论】:
以上是关于在反应中从json数据动态生成列表的主要内容,如果未能解决你的问题,请参考以下文章