Reactjs 如何在使用useState钩子的功能组件的不同实例之间隔离状态？

示例是使用useState保持单击计数器的简单功能组件

通过步进器MUI组件，我想创建具有不同初始值的示例组件实例，例如，在步骤0，初始值100，在步骤1，初始值111，在步骤2，初始值112

在单步执行步骤的每种情况时，尽管传递了不同的初始值，但示例功能组件仅将状态保持为第一个初始值，即100

文件是/Components/Navigation/steper01a.js，StepContent中引用的示例组件，它在HorizontalLinearStepper组件中引用。总体代码是来自MaterialUI Stepper组件的示例。我只是想测试它，以创建其他功能组件的不同实例（本例中的示例），每个步骤都有不同的初始值

示例组件：

function Example({ init }) {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = React.useState(init)

  return (
    <div>
      <p>init {init} </p>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

函数示例（{init}）{
//声明一个新的状态变量，我们称之为“count”
const[count，setCount]=React.useState（init）
返回(
init{init}

您单击了{count}次

设置计数（计数+1）}>单击我
)
}

步骤内容组件：

function StepContent({ step }) {
  console.log("step", step)

  switch (step) {
    case 0:
      return <Example init={100} />
    case 1:
      return <Example init={111} />
    case 2:
      return <Example init={112} />
    default:
      return "Unknown step"
  }
}

export default function HorizontalLinearStepper() {
...
 <div>
     <StepContent step={activeStep} />
 </div>
...
}

函数StepContent（{step}）{
console.log（“步骤”，步骤）
开关（步骤）{
案例0：
返回
案例1：
返回
案例2：
返回
违约：
返回“未知步骤”
}
}

水平直线步进器组件：

function StepContent({ step }) {
  console.log("step", step)

  switch (step) {
    case 0:
      return <Example init={100} />
    case 1:
      return <Example init={111} />
    case 2:
      return <Example init={112} />
    default:
      return "Unknown step"
  }
}

export default function HorizontalLinearStepper() {
...
 <div>
     <StepContent step={activeStep} />
 </div>
...
}

导出默认函数HorizontalLinearStepper（）{
...
...
}

参见运行示例 代码

在第0步单击“下一步”时，count应设置为init值111，但仍为100；在第1步单击“下一步”时，count应设置为init值112，但仍为100。似乎一旦在步骤0将状态计数初始化为100，则在步骤1和2中使用相同的状态，即状态未被隔离

---

这个问题是由于违反了钩子的规则而导致的吗？

您需要给出一个提示，提示您在不同的步骤中需要不同的示例组件实例。此提示可以这样做：

function StepContent({ step }) {
  console.log("step", step)

  switch (step) {
    case 0:
      return <Example init={100} key={0} />
    case 1:
      return <Example init={111} key={1} />
    case 2:
      return <Example init={112} key={2}/>
    default:
      return "Unknown step"
  }
}

函数StepContent（{step}）{
console.log（“步骤”，步骤）
开关（步骤）{
案例0：
返回
案例1：
返回
案例2：
返回
违约：
返回“未知步骤”
}
}

---

原因是React在所有情况下都在虚拟dom中看到一个示例，根据其算法，它认为它是同一个组件，但具有不同的属性，因此他只是更改其状态，而不重新初始化它

在组件内部，您的操作是正确的。初始值取自

道具

——这是常见做法

但是请参见，

useState（）

仅在初始呈现时应用init值（

componentDidMount

或

constructor

用于基于类的组件）。您使用该组件的方式没有重新创建