在反应中从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数据动态生成列表的主要内容,如果未能解决你的问题,请参考以下文章

如何在本机反应中从平面列表中设置 Json 数组

如何在 Vue 中从 JSON 构建动态 HTML 控件?

React - onClick 用于动态生成的组件

在核心数据中保存动态生成的带有父->子关系的JSON数据?

video.js 使用数据库中的 json 创建动态播放列表

在没有主节点的android中从JSON生成listview?