Question

我正在映射一些数据，我正在尝试使用一些数据作为语义ui-react Dropdown组件的选项，但即使我将.toArray()添加到结尾，数据也不会加载但是，如果我将数据结构更改为不使用Immutable，它可以正常工作。我主要想了解为什么这样我才能更好地理解事物。

以下是使用immutable的数据映射：

＆＃13;

          {
            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>
              );
            })
          }

＆＃13;

我在控制台中收到有关未知道具的错误，但我没有在我的代码中添加这些道具：

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

Answer 1

api of semantic-ui-react下拉选项用于传入一组看起来像这样的对象：

{ text: '', value: '' }

但是，如果您在包含.toArray() Immutable.List的{{1}}上致电Immutable.Map，则不会.toJS()地图。

例如。

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

因此，您实际上是在给Dropdown一组地图，Dropdown不会使用.get从对象中获取值。

另一件事是React更喜欢接收数组而不是immutable.Lists。

因此，您可以使用reduce函数而不是map函数来创建反应组件的正常数组：

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

不可变的.toArray（）不会呈现数据 - ReactJS

1 个答案: