代码之家 › 专栏 › 技术社区 › StuffedPoblano

不变的toArray()不会呈现数据-ReactJS

immutable.js semantic-ui dropdown reactjs javascript

StuffedPoblano · 技术社区 · 7 年前

我正在映射一些数据,并尝试使用一些数据作为语义ui react下拉组件的选项,但即使我添加了 .toArray() 但最后,如果我将数据结构更改为不使用Immutable,则效果很好。我主要想知道为什么,这样我才能更好地了解事情。

以下是数据与不可变的映射:

          {
            labelingData.map((item, i) => {
              return (
                <span key={i}>
                  {
                    item.get('categories').map((category, c) => {
                      return (
                        <span key={c}>
                          {
                            category.get('subcategories').map((subcategory, sc) => {
                              return (
                                <span key={sc}>
                                  {
                                    subcategory.get('name') === 'Labels'
                                    ? <Dropdown
                                        defaultValue={'Bananas'}
                                        options={subcategory.get('childItems').toArray()}
                                      />
                                    : null
                                  }
                                </span>
                              );
                            })
                          }
                        </span>
                      );
                    })
                  }
                </span>
              );
            })
          }

我确实在控制台中收到一个关于未知道具的错误,但我没有在代码中添加这些道具:

Unknown props `_root`, `__ownerID`, `__hash`, `__altered` on <div> tag. Remove these props from the element

1 回复 | 直到 7 年前

willwoo 7 年前

这个 api of semantic-ui-react 下拉选项是传入一组对象,这些对象看起来像:

{ text: '', value: '' }

然而,当你打电话时 .toArray() 在 Immutable.List 包含一些 Immutable.Map 不会的 .toJS() 地图。

如。

var list = Immutable.fromJS({ value: 1 }, 2]);
console.log(list.toArray()); // prints [Immutable.Map, 2]

所以你实际上是给下拉菜单一个地图数组,而下拉菜单不使用 .get 从对象中获取值。

另一件事是React更喜欢接收数组,而不是不可变的。列表。

item.get('categories').reduce((result, category, c) => {
  result.push(<Category key={c} category={category} />);
  return result;
}, []);

推荐文章

yer · 如何从按钮下拉列表中获取值并将其保存在localStorage中?角度4

7 年前

Willy_Sunny · Bootstrap4下拉菜单填充输入组

7 年前

Andriano Crs · 如何使用VBA从下拉列表中筛选列表

7 年前

wpdev · Jquery在引导下拉列表中禁用伪元素上的链接

7 年前

Jalicia Smalley · 如何为两个下拉列表创建if语句

7 年前

Hahnemann · 在Shiny中传递ui中的小部件值

7 年前

Pradnya Bhagat · 基于Ionic 3中的第一个下拉选择显示/隐藏第二个下拉选择

7 年前

user9433918 · 不应悬停的不可见元素

7 年前

evolmind · Angular 2:如何使用我的服务从json文件中填充下拉列表?

7 年前

RA19 · 单击引导下拉列表项,使用toggleClass Jquery更改按钮类

7 年前