从贴图对象渲染反应组件

Question

在reactjs中，我试图从贴图对象渲染组件。更具体地说，按下一个按钮，我创建了一个新的“FormRow”组件，为了方便起见，我将其存储在javascript映射对象中（因为稍后我将使用它）。无论何时，我都想渲染刚刚添加的新组件，但我不知道如何从贴图中获取它。

我尝试以不同的方式解决我的问题，使用：

1. myMap.for每个（key=

我没有尝试的是：

1. https://stackoverflow.com/a/50183395/9282731（我不太清楚...）

这是我的密码：

作曲家。js:

  constructor() {
    super();
    this.state = {
      counter: 0,
      myMap: new myMap()
    };

    this.handleCreateNewRow = this.handleCreateNewRow.bind(this);
  }

  /** It returns a new FormRow. */
  handleCreateNewRow() {
    let cloneState = this.state;
    let newRow = (
      <FormRow // <-- the component that I want to render.
        key={this.state.counter}
        rowNumber={this.state.counter}
      />
    );

    cloneState.myMap.set(cloneState.counter, newRow);
    cloneState.counter++; // increment the counter for rows
    this.setState(cloneState);
  }

  render() {
    return (
      <div className="container-fluid m-3">
        <div className="col col-9  float-left">
          <div className="row">
            <div className="text-left">
              <h1>Form Builder</h1>
            </div>
          </div>

          {/* Here is the problem! It automaticly loads all the row created previously */}
          {this.state.myMap.forEach(value => {
            console.log(value); // check

            // it print me what I want, but it doesn't render it...
            return value;
          })}
        </div>
      </div>
    );
  }

控制台。日志（值）返回：

{$$typeof: Symbol(react.element), type: ƒ, key: "0", ref: null, props: {…}, …}

这是我期望的输出，但我不知道为什么渲染（）方法不渲染它。如果您使用Array更改Map对象，则此示例可以工作，并且呈现（）方法向用户呈现他所期望的内容。

Answer 1

我对地图知道的不多，但是，从另一个角度来看，我会更加声明性地处理这个问题，因此，让我们假设在
handleCreateNewRow（）
中，我会这样做。setState（{counter:this.state.counter，anotherMeta..}）

然后渲染
var行 = []; （让i=0； i

Answer 2

而不是返回未定义的的，使用map（）on[... myMap.values（）]（这是将Map扩展到新数组中的值）：

{[...this.state.myMap.values()].map(value => {
    return value;
})}

这将返回myMap中条目的值。或者，由于不需要修改值，短版本：

{this.state.myMap.values()}

另外，请注意，让cloneState=this。state实际上并不克隆状态，而是创建对同一对象的引用。因此，您可以将您的handleCreateNewRow（）重写为：

handleCreateNewRow() {
    const counter = this.state.counter;
    let newRow = (
        <FormRow
            key={counter}
            rowNumber={counter}
        />
    );
    this.state.myMap.set(cloneState.counter, newRow);
    this.setState({counter: counter + 1, myMap});
} 

Answer 3

我看不出有任何理由使用映射当您使用序列号作为键时，仅使用数组更有意义。

但要从映射中获取所有值，请使用其值方法：

{this.state.myMap.values()}

您的forEach无法工作，因为forEach始终返回undefined，并且不处理其回调返回值。