Mobx 可观察映射到 js 数组

Question

我有一个组件作为道具传递 "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>);
    }
}

是否可以这样做：

this.props.fields.map(function(i, el){
    console.log(i, el)
    // render React components
})

在哪里可以根据从 map 方法中返回的值渲染子组件？

Answer 1

您可以在可观察对象 Map 上使用 values or entries 来获取所有值或条目的迭代器，并将其分布在一个新数组中并映射到该数组上：

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

Mobx 可观察映射到 js 数组

Mobx observable map to js array

javascript

reactjs

mobx