Javascript Mobx可观测映射到js数组

我有一个组件，它作为道具传递“form.$（'userProfile'）.fields”的值，这是一个可观察的映射，如console.log屏幕截图所示：

class Location extends React.Component<*> {
    render() {
        console.log(this.props.fields);
        this.props.fields.map(function(i, el){
            console.log(i, el)
        })
        return (<h1>location fields</h1>);
    }
}

您可以在何处根据从map方法内部获取的值渲染子组件？

您可以在observable

map

上使用，以获取所有值或条目的迭代器，并将其分布在新数组中并映射到：

class Location extends React.Component<*> {
  render() {
    return (
      <div>
        <h1>location fields</h1>
        {[...this.props.fields.entries()].map(function(entry) {
          return (
            <div key={entry[0]}>
              {entry[0]}: {entry[1]}
            </div>
          );
        })}
      </div>
    );
  }
}

类位置扩展React.Component{
render（）{
返回(
位置字段
{[…this.props.fields.entries（）].map（函数（条目）{
返回(
{entry[0]}:{entry[1]}
);
})}
);
}
}

mobx有一个toJS函数，它允许您将可观察的内容转换回常规的js数组。您可以从“mobx”和toJS（this.props.fields）导入{toJS}。从mobx4开始，这两个字段都没有映射方法。

class Location extends React.Component<*> {
  render() {
    return (
      <div>
        <h1>location fields</h1>
        {[...this.props.fields.entries()].map(function(entry) {
          return (
            <div key={entry[0]}>
              {entry[0]}: {entry[1]}
            </div>
          );
        })}
      </div>
    );
  }
}