I have 2 buttons, Single Component and Multiple Component.

When I click on Multiple Component, I expect it to add 3 components, but it adds only 1.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { observer } from "mobx-react-lite";

function App() {
  const [component, setComponent] = useState([]);

  useEffect(() => {});

  const newArray = [1, 2, 3];

  const Test = observer(() => {
    return (
      <div>
        <p>Test</p>
      </div>
    );
  });

  const Test2 = observer(() => {
    return (
      <div>
        <p>Test2</p>
      </div>
    );
  });

  const Test3 = observer(() => {
    return (
      <div>
        <p>Test3</p>
      </div>
    );
  });

  async function MultipleComponent() {
    newArray.map(async (x) => {
      if (x === 1) {
        await setComponent([...component, Test]);
      } else if (x === 2) {
        await setComponent([...component, Test2]);
      } else {
        await setComponent([...component, Test3]);
      }
      console.log(x);
    });
  }

  return (
    <div>
      {component.map((Input, index) => (
        <Input components={component} key={index} />
      ))}
      <button onClick={() => setComponent([...component, Test])}>
        Single Component
      </button>
      <button onClick={() => MultipleComponent()}>Multiple Component</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

codensadbox: https://codesandbox.io/s/react-hooks-useeffect-forked-edmgb5

CodePudding user response：

There is no point in using await on setState, nowhere the docs say it is a good idea. On the other hand you need to use version of setState which accepts an updater function, there you can get previous state.

setComponent(ps=>[...ps, Test2])

Also, I don't have link to official docs, but I am not sure storing components inside state is good idea either. You could store some identifier in state which indicates which component it is and then render that one when time comes.