Antd steps 组件创建单个实例而不是正确的步骤

Question

我正在使用 antd steps 组件并从 API 中获取订单处理信息，并且流程存储在一个数组中，因此我必须在步骤上使用 map 来填充信息，但是只有一个步骤被多次创建。我希望它们之间有一条线，但这并没有发生，因为它创建了一个步骤 3 次。

我在这里附加了沙箱来解释问题：https://codesandbox.io/s/adoring-kare-lzxbv

这是我尝试执行的实际步骤：https://codesandbox.io/s/silly-kowalevski-c4ngz

Answer 1

试试下面的代码：

export default function App() {
  const [currentStep, setCurrentStep] = useState(1);
  const { Step } = Steps;

  const data = [
    { id: "100", name: "Step 1" },
    { id: "101", name: "Step 2" },
    { id: "102", name: "Step 3" }
  ];

  return (
    <div>
      <Steps direction="vertical" current={currentStep}>
        {data.map((item, index) => (          
            <Step key={index} title={item.name} />
        ))}
      </Steps>
    </div>
  );
}

您在循环中使用了 Steps 标签，所以它不起作用。

同时为下一步和上一步创建一个函数以更新当前步骤状态。

Antd steps 组件创建单个实例而不是正确的步骤

Antd steps component creating single instance instead of proper steps

reactjs

antd