javascript - 从 map 对象渲染 react 组件

Question

在 reactjs 中，我试图从 Map 对象渲染一个组件。更具体地说，在按下按钮时，我创建了一个新的“FormRow”组件，为了方便起见，我将它存储在一个 javascript Map 对象中(因为我稍后会用到它)。每当它发生时，我都想渲染刚刚添加的新组件，但我不知道如何从 Map 中获取它。

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

1. myMap.forEach(key => {return myMap.get(key)});
2. myMap.forEach(component=> {return component});
3. myMap.values()
4. myMap.entries()
5. Object.keys(myMap).map(...)

我没试过的:

1. https://stackoverflow.com/a/50183395/9282731 (我没看清楚。。。)

这是我的简化代码:

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

console.log(value) 返回:

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

这是我期望的输出，但我不知道为什么 render() 方法不渲染它。如果您将 Map 对象更改为数组，则此示例有效，并且 render() 方法会向用户呈现他所期望的内容。

Answer 1

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

但是要从 Map 中获取所有值，您可以使用它的 values方法:

{this.state.myMap.values()}

你的 forEach 没有工作，因为 forEach 总是返回 undefined 并且不对其回调的返回值做任何事情。