Javascript 从贴图对象渲染反应组件

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

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

forEach（key=>{return myMap.get（key）}）

forEach（组件=>{return component}）

myMap.values（）

myMap.entries（）

Object.keys（myMap.map）（…）

我没有尝试的是：

（我不太明白……）

这是我的密码：

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

---

这是我期望的输出，但我不知道为什么render（）方法不渲染它。如果您使用数组更改Map对象，此示例将起作用，render（）方法将向用户呈现他所期望的内容。

当您使用序列号作为键时，我看不出有任何理由使用

贴图，只有数组才更有意义

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

您的
forEach
不起作用，因为
forEach
总是返回
undefined
，并且不处理其回调中的返回值。
我对映射知道得不多，但是，从另一个角度来看，我更倾向于声明性，因此，让我们在

handleCreateNewRow（）


我愿意做

this.setState（{counter:this.state.counter++，anotherMeta..}）

然后渲染

var行=[]；
for（设i=0；i
而不是
forEach（）
，后者返回
未定义的
在
[…myMap.values（）]
上使用
map（）

这将返回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});
} 

handleCreateNewRow（）{
常量计数器=this.state.counter；
设newRow=(
);
this.state.myMap.set（cloneState.counter，newRow）；
this.setState（{counter:counter+1，myMap}）；
} 
您应该在返回之前和渲染内部执行此操作，在那里执行计算并在返回中渲染，您是对的，我必须更加注意
让cloneState=this.state
。我尝试了你的解决方案：
{this.state.myMap.values（）.map（value=>{return value；}）}
但是它给了我错误，因为myMap.values（）返回的是迭代器而不是数组。你当然是对的，对不起。如果不需要修改映射条目，可以使用我提供的简短版本。否则，您可以将映射的值分散到一个数组中：
{[…this.state.myMap.values（）].Map（…）}
。有关
…
的更多信息。它可以工作！多谢各位！（我建议你更新答案上的代码，以便对其他人也有帮助）我把你的三个答案都混在了一起@Jumper buboh和T.J.Crowder，我用buboh和T.J.Crowder建议的.values（）方法解决了我的问题，我使用您和buboh的建议清理并提高了代码的效率。谢谢你们！
{[...this.state.myMap.values()].map(value => {
    return value;
})}

{this.state.myMap.values()}

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