useState替换当前元素

Question

我有两个按钮。Add1和Add2

Add2按钮在Test中无法工作。我做错什么了。我不太熟悉反应。

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 Test = observer(() => {
    return (
      <div>
        <p>
          Test -
          <button onClick={() => setComponent([...component, Test])}>
            Add 2
          </button>
        </p>
      </div>
    );
  });

  return (
    <div>
      {component.map((Input, index) => (
        <Input key={index} />
      ))}
      <button onClick={() => setComponent([...component, Test])}>Add 1</button>
    </div>
  );
}

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

代码框：https://codesandbox.io/s/react-hooks-useeffect-forked-ml77pz

Answer 1

如果不保留引用，则不应该在另一个组件中创建组件！

将其移出应用程序并添加支持setComponent

const Test = observer(({setComponent}) => {
  return (
    <div>
      <p>
        Test -
        <button onClick={() => setComponent(component => [...component, Test])}>
          Add 2
        </button>
      </p>
    </div>
  );
});

function App() {
   ...
}

然后，在呈现时，将“setComponent”传递给它：

<Input key={index} setComponent={setComponent} />

Answer 2

您尚未为此递归呈现定义基本大小写。

 const Test = observer(() => {
    return (
      <div>
        <p>
          Test -
          <button onClick={() => setComponent([...component, Test])}>
            Add 2
          </button>
        </p>
      </div>
    );
  });